cdedreuille

I’ll try. It just feel weird to have to do that. Perhaps this could be something to fix in the next version of the plug-in.

I believe this is due to the new server components structure in Nextjs 13. Our code is working fine but this warning is really annoying. I’m also using Framer Motion who add and remove inline style as well but when styles are empty it doesn’t leave an empty style tag and no warning. I’m using a basic scroll trigger animation and no other plugins. is there a way to make sure style disappear if there’s no style applied to the body?

I'm working on a Nextjs 13 app and GSAP is working well but I have an annoying warning sign. GSAP is automatically adding an empty `style` tag on the body causing the bug. Is there a way to avoid this?

I think I found a solution. let main = gsap.timeline(); whyElem('.why-pattern').forEach((_, i) => { console.log(whyElem(`.why-pattern1`)[i]); const anim = gsap.timeline(); anim.to(whyElem(`.why-pattern1`)[i], { x: 64, duration: 1, ease: 'power2.inOut' }); anim.to( whyElem('.why-pattern2')[i], { rotate: 180, duration: 1, ease: 'power2.inOut' }, '<0' ); anim.to(whyElem('.why-pattern2')[i], { scale: 3, rotate: 90, borderRadius: 16, duration: 1, ease: 'power2.inOut', }); anim.to( whyElem('.why-pattern3')[i], { scale: 3, rotate: 90, borderRadius: 16, duration: 1, ease: 'power2.inOut' }, '<0' ); main.add(anim, i * 0.1); }); Thanks a lot for your help @OSUblake

This is what I'm using right now. Each element has a class .why-pattern const whyElem = gsap.utils.selector(whyRef); const tl = gsap.timeline(); tl.to(whyElem('.why-pattern1'), { x: 64, duration: 1, ease: 'power2.inOut' }); tl.to(whyElem('.why-pattern2'), { rotate: 180, duration: 1, ease: 'power2.inOut' }, '<0'); tl.to(whyElem('.why-pattern2'), { scale: 3, rotate: 90, borderRadius: 16, duration: 1, ease: 'power2.inOut', }); tl.to( whyElem('.why-pattern3'), { scale: 3, rotate: 90, borderRadius: 16, duration: 1, ease: 'power2.inOut' }, '<0' ); But this of course is not staggered. It's just a single timeline animating all elements with the same class. Do you have any example on how to create multiple timelines from an array?

Oh I didn't know you could create a timeline of timelines. I'll try that.

Just to make it clearer. What I'm looking for is: Using scrollTrigger, when I enter the view port Launch 30 timeline animations Each timeline is staggered by 0.1

Hi, I'm having a hard time trying to figure how to launch multiple timelines in a sequence with interval (or staggered). I have 30 times the same component. Each component is a timeline and what I'm looking for is a way to launch animate all of them the same way you do stagger on a tween. Not sure if this make sense.

I really like Algolia's API Reference documentation. They explain in details each options quite a clear way. https://www.algolia.com/doc/api-reference/widgets/instantsearch/js/ They also have a guide section with different use cases. Nextjs example folder in their Github is also such a good one. It helped me a lot to get started. I know you are using Codepen but perhaps having a single place with all the examples would be amazing. https://github.com/vercel/next.js/tree/canary/examples Stripe is also a really great one https://stripe.com/docs/api/payment_methods Perhaps the main thing is the navigation. In this page for example https://greensock.com/docs/v3/Plugins/ScrollTrigger All the keys you can add inside a scrollTrigger object is not part of the left navigation. The other day I couldn't remember how you named 'scrub' or 'markers' and because it was not part of the left navigation, it took me some time to find it. I ended up watching again the video. Lodash is also really useful. I always find the information very fast. https://lodash.com/docs/4.17.15 Also maybe something that could help having a faster and more delightful experience would be to remove the animations on the left navigation sidebar in the docs. It feels a bit clunky. ---- For the list of tutorials, that's such a great idea. Perhaps having a voting system for people to choose what tutorial they want next would be great. For me, having multiple tutorials or code examples on react would be amazing. Perhaps few examples using ScrollTrigger in all its glory.

That said, you are always super reactive on the forum which is absolutely awesome.

Hi, This is more a feature request. GSAP is absolutely fantastic but I found the documentation quite hard to navigate and focus a lot on vanilla javascript. As a react developer it would be great to have a dedicated section for react or separate code examples in different frameworks. Also for products like scrollTrigger, having everything in a single page is a bit hard to navigate. I found myself using the different videos you created as a reference instead of doc which takes more time.

Thanks a lot. I'll give it a try. Also the new selector util is pretty awesome. So much cleaner when working with React.

Thanks for your reply. I can indeed add a callback which work when you scroll down but it doesn't reverse the animation when you go up. That's the part I'm not sure how to do. I also tried to create a separate animation but I can't figure out how to use the trigger because I would like the animations to be launch at a specific moment in the timeline. Taking the code below which is 4000px long. It doesn't seems to work if I do something like start: '2000px center' because the element is pinned. So 2000px will be out of the animation. const tl = gsap.timeline(); tl.fromTo(text1Ref.current, { y: 20 }, { y: 0, duration: 0.6 }); tl.to(text1Ref.current, { opacity: 0, duration: 0.1 }, '>1'); tl.to(text1Ref.current, { y: -260, duration: 0.6 }, '<'); tl.to(text2Ref.current, { opacity: 0, duration: 0.1 }, '>1'); tl.to(text3Ref.current, { opacity: 1, duration: 0.1 }, '<'); tl.to(patternRef.current, { y: 160, duration: 0.1 }, '<'); tl.to(text3Ref.current, { y: 0, duration: 1 }); ScrollTrigger.create({ trigger: containerRef.current, animation: tl, toggleActions: 'play none none reverse', start: 'top 10%', scrub: true, pin: true, end: '+=4000px', });

Hi, I'm wondering if that's possible to mix a normal animation with a scrubbed timeline. This is my timeline animation right now. Everything is scrubbed with ScrollTrigger which is great but I would like to launch an animation that is not scrubbed in the middle of the timeline. I tried to use onComplete on one of the element which work when you go down but it doesn't reverse or start again when you go up. Any idea on how to achieve this? const tl = gsap.timeline(); tl.fromTo(text1Ref.current, { y: 20 }, { y: 0, duration: 0.6 }); tl.to(text1Ref.current, { opacity: 0, duration: 0.1 }, '>1'); tl.to(text1Ref.current, { y: -260, duration: 0.6 }, '<'); tl.to(text2Ref.current, { opacity: 0, duration: 0.1 }, '>1'); tl.to(text3Ref.current, { opacity: 1, duration: 0.1 }, '<'); tl.to(patternRef.current, { y: 160, duration: 0.1 }, '<'); tl.to(text3Ref.current, { y: 0, duration: 1 }); ScrollTrigger.create({ trigger: containerRef.current, animation: tl, toggleActions: 'play none none reverse', start: 'top 10%', scrub: true, pin: true, end: '+=4000px', });

Ah I didn't know about selector. This doesn't solved my issue but that's a good one to know. I think I need to refactor my animation differently.

Is there a way to trigger an animation at exactly 2000px from the top of the page while making sure that if you go back to the top, the animation reverse? I guess I'm describing a timeline animation attached to the scroll with a trigger at 2000px from the top of body. I'm working on a Nextjs app so forwarding refs is not the ideal scenario.

Ah clearprops seems to work great. Thanks a lot I didn't know about it.

Hi, I have a timeline that repeat infinitely but I have a problem with the second loop onward. I'm using the from value to reset justifyContent but for some reason after the first loop it doesn't reset. The from value is ignored. const tl = gsap.timeline({ repeat: -1, repeatDelay: 6 }); tl.fromTo(t1, { justifyContent: 'flex-end' }, { height: 0, duration: 1 }, '>1'); tl.fromTo(t4, { justifyContent: 'flex-start' }, { height: 'auto', duration: 1 }, '<'); tl.set(t1, { order: 9 }); tl.fromTo(t2, { justifyContent: 'flex-end' }, { height: 0, duration: 1 }, '>1'); tl.fromTo(t5, { justifyContent: 'flex-start' }, { height: 'auto', duration: 1 }, '<'); tl.set(t2, { order: 10 }); tl.fromTo(t3, { justifyContent: 'flex-end' }, { height: 0, duration: 1 }, '>1'); tl.fromTo(t6, { justifyContent: 'flex-start' }, { height: 'auto', duration: 1 }, '<'); tl.set(t3, { order: 11 }); tl.fromTo(t4, { justifyContent: 'flex-end' }, { height: 0, duration: 1 }, '>1'); tl.fromTo(t7, { justifyContent: 'flex-start' }, { height: 'auto', duration: 1 }, '<'); tl.set(t4, { order: 12 }); tl.fromTo(t5, { justifyContent: 'flex-end' }, { height: 0, duration: 1 }, '>1'); tl.fromTo(t8, { justifyContent: 'flex-start' }, { height: 'auto', duration: 1 }, '<'); Any idea what I'm doing wrong?

Might not be a GSAP question but what would be the best way then to apply the same effect to multiple refs in react. Is the only way to duplicate both the refs and the animation?

Hi ? I also had the issue using a simple create-react-app in production and this code worked for me. gsap.core.globals("ScrollTrigger", ScrollTrigger); I'll wait until 3.3.1 to test again and take this out.