Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

11 Newbie

About cdedreuille

  • Rank

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. 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, rota
  2. 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
  3. Oh I didn't know you could create a timeline of timelines. I'll try that.
  4. 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
  5. 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.
  6. 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_metho
  7. That said, you are always super reactive on the forum which is absolutely awesome.
  8. 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.
  9. Thanks a lot. I'll give it a try. Also the new selector util is pretty awesome. So much cleaner when working with React.
  10. 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.
  11. 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(text1Re
  12. 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.
  13. 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.
  14. Ah clearprops seems to work great. Thanks a lot I didn't know about it.
  15. 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.fr