b0nes

I’m working on getting a codepen going. I am making a site that is using scroll trigger to have scrub animations. Mainly manipulating scale on svgs and x and y of images. The animations look really good on desktop but are very laggy on mobile. Curious if there is something I can do to prevent that or if I need to just not have animations on mobile? https://www.undeadportal.io there is the url any help or suggestions are greatly appreciated thank you!

So my goal is eventually to have multiple images using this animation on scroll. But I would like the image to start at 0 opacity and fade in then when it is leaving the screen to fade out. I have used another tl.fromTo before this to change its opacity but it doesnt seem fluid. Not sure if anyone could help me out with this!

Can I point you to a code repo?? I am having a problem getting it to work in the stack blitz

I made a stack blitz to reproduce the issue hopefully this is right I have never made one before! Thank you https://stackblitz.com/edit/nextjs-6gskyn?file=pages/index.js

Thanks I read that article and implemented a context and a clean up with the div surrounding the animated items as the scope. But it still flashes and then disappears? If I comment it out it stays there but I am unsure what I am doing. It was working initially and I changed the end from +=400% to +=300% and then it started happening? Probably not because of that just weird occurrence.

Alright quick question if anyone could help. I cant replicate in a codepen for some reason but I have a landing animation that I had working on scroll but now it just flashes once when the page loads and then goes away?? I am using i18next idk if that could possibly be an issue? useEffect(() => { const g = genuine.current; const u = undead.current; const pt = pinTarget.current; const imgDiv1 = imageDiv1.current; const imgDiv2 = imageDiv2.current; var tl = gsap.timeline({ scrollTrigger: { trigger: pt, end: "+=400% bottom", markers: true, pin: true, scrub: true, }, }); tl.add("start"); tl.fromTo(g, { x: 0 }, { x: 1500, duration: 3 }, "start"); tl.fromTo(u, { x: 0 }, { x: -1500, duration: 3 }, "start"); var tl2 = gsap.timeline({ scrollTrigger: { trigger: pt, end: "+=200% bottom", markers: true, pin: true, scrub: true, }, }); tl2.add("startImage"); tl2.fromTo(imgDiv1, { y: 0 }, { y: -2000, duration: 3 }, "startImage"); tl2.fromTo(imgDiv2, { y: 0 }, { y: 2000, duration: 3 }, "startImage"); }, []);

Started working on it I am getting the initial div pinned but the animation is not working on scroll? Im trying to achieve that the headings are scrubbed and go all the way outside the view port. Once they do then unpin the div? I have also never done a codepen so hopefully this link works! Any help would be awesome! https://codepen.io/colemiller21/pen/YzjrQvv

Hello everyone! I am new to GSAP just started learning this month since the website that I am trying to create is needing some scroll animations I feel like this is probably the best product to use with Reactjs. But I am curious if the below video would even be possible to create using just ScrollTrigger or would I need another library?? Any and all responses or pointing to documentation that could help me out will be greatly appreciated. Thank you in advance! https://assets.awwwards.com/awards/sites_of_the_day/2022/08/outstanding-person-nav.mp4 This is a video of something I am trying to achieve.