ayush12

@OSUblake Thanks for responding, let me try this.

Hi I wanted to achieve this video animation. Can anyone help me with this? Thank you so much. https://drive.google.com/file/d/1Jgr71syEa6SOfOlw6Gw_XOTRv0ccJyb6/view?usp=sharing

I want to replicate this video animation. But I am unable to think of a way to pin and start the text animation simultaneously. I have created something with the help of docs but can't get it same. Can anyone help me with a better way to create this? Thanks for reading.

My noob ass didn't thought of that. Thanks for the solution it's working perfectly. God bless @Cassie

I am using gsap scrolltrigger to toggle a class that makes the container sticky. After the end of the animation when the class is removed it behaves weirdly. Here is the video link : https://drive.google.com/file/d/12WOmmK43dFBxvVLKuDPoAGnOAT4-b76L/view?usp=sharing As you can see in the video after the end of animation it moves it..... Is there any fix to this ? Javascript code : const canvas = document.getElementById('hero-lightpass'); const context = canvas.getContext('2d'); const frameCount = 45; const currentFrame = index => `./assets/medium_${(index + 1).toString().padStart(4, '0')}.jpg`; canvas.width = 600; const images = []; const airpods = { frame: 0, }; for (let i = 0; i < frameCount; i++) { const img = new Image(); img.src = currentFrame(i); images.push(img); } console.log(canvas.width); gsap.to(airpods, { frame: frameCount - 1, snap: 'frame', scrollTrigger: { trigger: '.sticky-wrapper', scrub: 0.5, markers: true, start: 'top 48px', end: 'center 49px', toggleClass: 'sticky', }, onUpdate: render, }); images[0].onload = render; const getheight = () => {}; function render() { console.log(images[0].naturalHeight); const h = images[0].naturalHeight; const w = images[0].naturalWidth; const aspect = h / w; console.log(aspect); canvas.height = aspect * canvas.width; context.drawImage(images[airpods.frame], 0, 0, canvas.width, canvas.height); }

In the given like you can see that the scroll animation gets stuck for ios. Working fine of android. Below is my code. Here is the site link : https://animationstest.vercel.app/work I am also attaching the video for your reference : useEffect(() => { gsap.registerPlugin(ScrollTrigger); const boxes = gsap.utils.toArray('.Work-info'); boxes.forEach(box => { gsap.from(box, { scrollTrigger: box, y: 100, duration: 1.2, opacity: 0, }); }); }, []);

Sorry, yes it is working but the thing is now I have two timelines, one is this and the other one is the one in your answer. Is there any way to use this same timeline because having two timelines is making my app to behave a in a unpredictable way. Below is the the full code till now Edit: Also stagger is not working now gsap.registerPlugin(ScrollTrigger); const Aboutpg = gsap.timeline({ delay: 0.5, ease: 'power4.out' }); Aboutpg.from('.aboutme h1', { y: 200, duration: 0.8, opacity: 0, skewY: 10, }); const articles = gsap.utils.toArray('.aboutme article'); articles.forEach(article => { let tl = gsap.timeline({ scrollTrigger: article }); tl.from(article, { y: 150, duration: 0.8, opacity: 0, stagger: 0.2, skewY: 10, }); });

Hello Cassie, thank you so much for taking time to reply this silly question, but I am still not getting what I want to achieve. As you saw in the video, all the animations are completed as soon as the page loads. I want the article that are not visible on the screen to animate when I scroll. Using your solution, it's still the same. If possible could you suggest another solution ? Basically I want to do this but with timeline......... const articles = gsap.utils.toArray('.aboutme articles'); articles .forEach(article => { gsap.from(article, { scrollTrigger: article y: 150, duration: 0.8, opacity: 0, stagger: 0.2, skewY: 10, }) });

Hi I am new to gsap and I am unable to achieve what I want using scrollTrigger . I want the article that is not on page to revel animation on scroll but it gets finished with other animations. I already saw Most Common ScrollTrigger Mistakes but didn't got the answer that I wanted. Below is the code and video sample const Aboutpg = gsap.timeline({ delay: 0.5, ease: 'power4.out' }); Aboutpg.from('.aboutme h1', { y: 200, duration: 0.8, opacity: 0, skewY: 10, }); Aboutpg.from('.aboutme article', { scrollTrigger: '.aboutme article', y: 150, duration: 0.8, opacity: 0, stagger: 0.2, skewY: 10, }); Untitled.mp4