How to make it responsive?

[nabjoern]

I have a website that I have animated with GSAP and ScrollMagic. Now I want to make it responsive. For this tweens need to be updated. Do I have to rewrite the tweens, or is there a function to do it?

[trevordunn]

Yes you'll have to rewrite the tweens. What about them are you changing? Their duration or css vars?

However, scene durations can be made responsive to the viewport height simply by specifying a percentage (ex. "100%"). See the Responsive Duration example.

[valeriosillari]

i am working also on a similar problem.

at resize of window i want to change the duration. i cannot use the responsive option (percentage 100%) because one of the section is bigger than the viewport, so I need to init again scroll magic and set a new duration value in pixels. any one has the same problem?

[b4z81]

take a look at this site: http://design-voilaah.com/mnd/app/ and to the related js: http://design-voilaah.com/mnd/app/scripts/main.js

they managed the duration and the height of the scenes using dynamic values:

// calculate height and duration of each scene typicalHeight = parseInt( (newHeight - scene1Height) / 10, 10); curveHeight = typicalHeight/1.34; flatHeight = typicalHeight/0.86; $('.trigger', $cachedTriggers).each( function(i) { if (i > 0) { // for even i, we are in the curve, so the height is shorter (i % 2) ? $(this).height(curveHeight) : $(this).height(flatHeight); } });

and

new ScrollMagic.Scene({triggerElement: ".trigger.scene2", duration: curveHeight * ratio})

[tim-basic]

I'm working on a similar problem too. I've been using scrollmagic to change the color of a hamburger menu depending on which section it is sitting on. But on my durations go to hell when the orientation is changed or the length of something on a page increases after the initial load :/