Jump to content

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


  • Posts

  • Joined

  • Last visited

medmedmed75's Achievements

  1. Hey everyone! I was wondering if it possible to : first, create a Timeline then, on each tween, apply a ScrollTrigger with a different trigger for each element. The idea is to create a timeline where I can create animation for each element .hero, .infos, .other and the triggers would be these classes. <section> <div class="hero"> <h1>Title</h1> </div> <div class="infos"> <div> <p>blablabla</p> </div> </div> <div class="other"> <div> <h2>Subtitle</h2> </div> </div> </section> Maybe I can do something like this but it creates multiple ScrollTrigger reference. const tweensConfig = [ { type: "to", classname: ".hero", x: 100, }, { type: "from", classname: ".infos", opacity: 1, }, ] const createAnimation = () => itemsClass.map(({ type, classname, ...rest }) => gsap[type](classname, { scrollTrigger: { trigger: classname }, ...rest })) Sorry in advance if I did a duplicated post and I just read the common mistakes usage for ScrollTrigger but I can't find a solution. Many thanks for your help
  2. Hey @Rodrigo Sorry for the late response, off for the weekend but thank you so much for your explanations and source! Good inspiration I will maybe purpose something but I think Next should a more flexible routing (as Nuxt for example). Thanks again !
  3. Hey everyone! I was wondering if it possible to animate a page before the route change? I'm currently using a classic technic with Router.push(newUrl) when the animation is completed but I'm losing the anchor tag SEO benefit. Any idea ?
  4. Sorry, it was just a misunderstanding on my part (about scale3d). All is very clear, thank you so much for your help and reactivity!
  5. If I understand well, the transform3d is here just to perform the tween via the GPU (the thing I want btw lol)? So the motion is still performing by the transform() and not the transform3d? And, last question, what about scale3d? Can I use it just using force3D? Many thanks for your clarification, it helps a lot! 🙏
  6. @GreenSock thanks for your response! Maybe I'm confusing with the translate(...) and translate3d(...) I see in Chrome Devtool. During the tween, I see translate() (with values changing) and translate3d(0, 0, 0) with no values changing. I mean, I thought I would only see translate3d performs does that mean it's working?
  7. Hey everyone! I have some trouble using force3D Here is an example: const tl = gsap.timeline() gsap.config({ force3D: true }) tl .set('div', { yPercent: 100 }) .to('div', { yPercent: 0, duration: 1, delay: 1 }) Maybe i'm using it wrong? (I don't create a codepen because the code is very simple) Many thanks for your help
  8. @ZachSaucier Wow that's so nice! never seen it, game changer!
  9. Hi @elegantseagulls I tried everything... but not to register my ScrollToPlugin and it works very well. Many thanks, I edit my post with the solution!
  10. Hello everyone, I'm currently working on a React project and I need to use ScrollToPlugin. Here is how I import the plugin import gsap from 'gsap' import ScrollToPlugin from 'gsap/ScrollToPlugin' And then, to prevent some troubles in production, added const plugins = [ScrollToPlugin] Then I have a scroll ref const scrollRef = useRef(null) And finally this is how I used the scrollto function const scrollTest = el => { gsap.to(window, {duration: 1, scrollTo: el }); } <button className={s.btn__scroll} onClick={() => [setScrolled(true), scrollTest(scrollRef)]}>Go Down</button> After many researches, I thought it was due to an import issue. So I've tried to insert cdn script directly in the public html... doesn't work. Any ideas? SOLUTION As @elegantseagulls said below, you just have to register your ScrollToPlugin as follow : gsap.registerPlugin(ScrollToPlugin) Many thanks
  11. @OSUblake For your information. Never try it but seems legit. https://medium.com/@tomaszferens/delay-unmounting-of-the-component-in-react-8d6f6e73cdc
  12. @OSUblake React Transition Group. I just want to understand the logic of RTG, not something else... just trying to understand. So, no, I can not make a demo. Thanks for your help.
  13. @OSUblake thanks for your response. You are right, that's why I ask for a solution. Yes, just saw that before. I thought it was a bit complicated to understand how to apply it. Finally, RTG "just" timeout the unmount of the component?
  14. Hello everyone! I've got some troubles to make my transition between 3 differents components. The logic is pretty simple : I just want to go from opacity 0 to 1 when component is being mounted (easy with hooks / stateless components, or componentDidMount / react class) and to go from opacity 1 to 0 when the component is being umounted. Neither the useEffect nor the componentWillUnmount are working for this transition. I admit that's a pretty simple transition but impossible to do when component is unmount. Here is the function fired when Homepage, About Us or Corporate are clicked : toggleBetweenAllPages = () => { const page = this.props.toggle.page if (page === "homepage") { return <Homepage /> } else if (page === "corporate") { return <Contact /> } else if (page === "about us") { return <Infos /> } } Hope this is clear and thanks in advance for your help!