I've been at this for a few days now (starting with Skrollr and now ScrollMagic), and I just can't figure it out:
If I create an SVG animation - it completes 100% on my laptop screen. If I view the animation on a larger screen (with more viewport height), the animation doesn't complete (unless I allow the viewport to go beyond the footer, creating blank space).
My question is this: how should I use ScrollMagic trigger points in a responsive design where the height of the viewport changes? I initially thought that I could trigger them on the percentage that the actual scrollbar has been scrolled - thus keeping everything in proportion (ie, fire SVG line when the scrollbar has been scrolled 50%), but it seems like this is not the case.
If anyone could provide clarification on this, I would REALLY appreciate it!
ps, I can create a CodePen if needed - though this is quite a general question that will be applied to animations throughout the site.
ScrollMagic + Different Screen Height = CONFUSION!!
in GSAP
Posted
I've been at this for a few days now (starting with Skrollr and now ScrollMagic), and I just can't figure it out:
If I create an SVG animation - it completes 100% on my laptop screen. If I view the animation on a larger screen (with more viewport height), the animation doesn't complete (unless I allow the viewport to go beyond the footer, creating blank space).
My question is this: how should I use ScrollMagic trigger points in a responsive design where the height of the viewport changes? I initially thought that I could trigger them on the percentage that the actual scrollbar has been scrolled - thus keeping everything in proportion (ie, fire SVG line when the scrollbar has been scrolled 50%), but it seems like this is not the case.
If anyone could provide clarification on this, I would REALLY appreciate it!
ps, I can create a CodePen if needed - though this is quite a general question that will be applied to animations throughout the site.