How can I have the following only becom active when the browser is a certain width, i.e. over 1024px?
var actionBurger = gsap.fromTo('.burger', {autoAlpha: 0,}, {duration:0.3, autoAlpha: 1, ease:'power2.out', paused:true});
ScrollTrigger.create({
trigger: ".header",
start: "6px top",
onEnter: () => actionBurger.play(),
onLeaveBack: () => actionBurger.reverse(),
});
Thanks
Thanks, I see what you mean.
Though it's odd that when pine I use 'pin: true' it's quite smooth? The only issue then is because it is pined it doesn't stay in the browser frame?
https://codepen.io/heavymessing/pen/JjGOapW
Maybe it's a scale thing? At mobile size my version seems to work quite smoothly, at the large scale the jerkier it gets. https://codepen.io/heavymessing/pen/JjGOapW
Ah! That's cool, and kind of what I'm after, I'll tinker around and see how I get on.
Thank you!
One thing the lines are very jerky when they come on fast is there a way around that? https://codepen.io/heavymessing/pen/JjGOapW
I'm trying to get an array of paths to reveal themselves when the page is being scrolled down. As you can see from the pen I only have one and it isn't even in the middle of the browsers view.
I was wondering if there is a way of doing this using Greensock? I would also prefer it if the edges of the lines where circles, would this be achievable if this were some kind big mask reveal?
Thanks
I have the following:
var secOne = new ScrollMagic.Scene({ triggerElement: '.section-a', triggerHook: 0, duration: $(window).height() - 100 })
.setTween(
new TimelineMax()
.add( TweenMax.fromTo(['.section-a .svg-a'], 0.5, { autoAlpha: 0 }, { autoAlpha: 1, force3D: false, ease:Power4.easeNone }) )
.add( TweenMax.fromTo(['.section-a .text-a'], 0.5, { autoAlpha: 0 }, { autoAlpha: 1, ease:Power4.easeNone } ) )
)
.setPin('.section-a')
.addTo(controller);
Which is fine apart from the fact that the animations have to come in smooth no matter how fast the user scrolling up or down. In this case if the user scrolls to fast then the animated parts suddenly show up. Is there a way to slow down the tween so that no matter if the user scrolling really fast they'll always get a smooth in out response from the animated tween?
As you can see I have tried 'ease:Power4.easeNone' and that works to a degree but there's really nothing that stops it from zooming in on a fast scroll movement. Also I know scroll jacking is the work of Beelzebub but I'm being forced into this against better reasoning.
Thanks