Responsive issues with tweenmax / duration initial point.

[nvassos]

I am working on a project http://staging.theagencycreates.com/dp_main/ ignore the fact all js and css are same page still initial phases but when you go to any section eg LOCATION, and you scroll down to the slider, that section when you resize the viewport, it gets messed up. The pinning is wrong etc. Do you have any idea of how to set it up to maybe, update the positioning of elements and reinitialize the script?

[mattjbrent]

Hi nvassos. Just a quick couple of points about responsive...

A defined offset is always a fixed pixel value. So when you resize, it will still fire at the specified offset even if your viewport is much smaller (it can cause strange behaviour).

you also set duration to a fixed value however this can be set to percentages. When defining percentages 100% is the full height of the browser scroll. This works much better because as the browser is scaled down, the distance you need to scroll through an animation decreases accordingly.

Pinning is much harder...you can wrap the whole code in an jQuery on window.resize but in my opinion this is very expensive. I found when using this on production it becomes unmanageable. I got around that by reloading the page on window resize. Using a preloader, the disruption to the site is minimal and was more acceptable in my use case.

you can check the production site at thesilentkiller.ca.

Hope this helps,

Matt

[nvassos]

Hey Matt, thank you for your reply, I do have reload on resize but commented out, I fixed the resizing by having an outer element and absolute position the inside, if you refresh you will see it works, however that messed up the pinning for some reason. Which is something I am trying to figure out, if you have any input. Awesome website by the way the one you linked.

By pinning I mean the gallery on each section should pin for a duration and then move out of it.