Jump to content
GreenSock

PointC last won the day on October 30

PointC had the most liked content!

PointC

Moderators
  • Posts

    4,964
  • Joined

  • Last visited

  • Days Won

    401

Everything posted by PointC

  1. I have a whole article about organic morphing which may prove useful for you as well. https://www.motiontricks.com/organic-morphing-getting-needed-points-from-adobe-illustrator/ Bottom line - easy SVG animation comes down to 3 things: Asset Prep Asset Prep Asset Prep Even though morphSVG can use shapes without the same number of points, I almost always try to use the same number. You can accomplish this by duplicating your start shape and push/pull the points until you get your end shape. The puppet warp tool is also great for that kind of thing. Best of luck on your project and happy tweening.
  2. I'd start like this: Forget about ScrollTrigger for the moment. Create a simple div and place your child containers inside of it. They'll need to be stacked so you'll have absolute positioning. Once you have that, create a clip-path for each. Don't worry about diagonal yet - just a basic right → left or left → right. Create a timeline that animates each clip path in sequence to reveal (or hide) each container. After that animates to your liking, it'll be very easy to wire it up to a ScrollTrigger and change the clip-paths to diagonal. Please give that a whirl and I'll help you if you get stuck.
  3. Of course you can. Use it all or any parts you like. Have fun.
  4. Okay, I think I understand. Is this what you need it to do? https://codepen.io/PointC/pen/jOZzwYP/ca4d3807850dfc1444f3273ce0365138
  5. You can use the same clip-path and a .fromTo() tween if you're just targeting the background again. If you need to clip all the elements, you can use multiple clip-paths. Say the first one is for the background image as in my demo. The second one could be for the whole container. Just stack up your elements in the proper parent child relationships and you'll be good to go. Have fun.
  6. I don't know much about React, but there is a Flip demo in the Advanced React Guide. This thread may be useful too. Hopefully that helps.
  7. I'm not really sure I follow the question. If the element is already past the start trigger, it's going to play. It sounds like maybe you want a different ScrollTrigger for desktop and mobile? Have you seen the .matchMedia() method? https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia() Or, if you want something to wait, you can always use a delayedCall. https://greensock.com/docs/v3/GSAP/gsap.delayedCall() Does that help? Or maybe I'm missing the objective altogether. Happy tweening.
  8. It's all how you set up your clip-path. https://codepen.io/PointC/pen/GRQxWdZ Happy tweening.
  9. I think the easiest thing would be to put them on a timeline and set repeat to infinite. Note: I had to use a delayedCall as the .switch-text element wasn't ready. https://codepen.io/PointC/pen/LYQdWOo/e255ee55bdaad00c15dfe941b6905962 You could also just use a function that calls itself onComplete of each word. Lots of ways to do it really. Happy tweening.
  10. Hi @fcdobbs Welcome to the forum and thanks for being a club member. 🎉 It's almost always easier to use CSS variables rather then the CSSRuleplugin. Here's a fork with that change. https://codepen.io/PointC/pen/mdXxWEb/439cdf2bdddcefdfd533e9c2a852747b You'd also want to avoid any CSS transitions on elements that will be animated with GSAP so you don't cause any conflicts. Happy tweening and welcome aboard.
  11. Hi @soma Here's a nice little function @GreenSock showed me when I was learning about the new quickTo. I was using a Draggable, but I've modified it a tiny bit to listen for your mousemove event. https://codepen.io/PointC/pen/LYQdRWa Happy tweening.
  12. Hi @DuncN Welcome to the forum. Just my two cents, but I'd probably use a clip-path for that. https://codepen.io/PointC/pen/OJQvXqJ Happy tweening.
  13. Yep - looks like you've gone back to the original way of creating a new timeline on each mouseenter event. You'll want to create one timeline for each button and play/reverse on enter/leave. https://codepen.io/PointC/pen/NWyYNyO/97b85ae7f0116ee69975b94071d17e76 I think you were trying to create the buttons like that again because your bounding client rect values were off as the motionPath animation hadn't completed yet. That's why I moved your button creation into a function and called it when the motion path animations are done. Jut my two cents, but you probably wouldn't really need to use the boundingClientRect() if you just wrapped each button and paragraph into a little div, grid or flex wrapper of some sort. Happy tweening.
  14. Happy to help. Thanks for being a club member. We really appreciate the support. 🎉 PS With separate spans you can make the cursor blink with a simple autoAlpha yoyo tween. Have fun.
  15. Those units will work just fine. https://codepen.io/PointC/pen/abqqXZz/591f1e23d6ae012278e23460ab4cedc8 When in doubt, give it a whirl. Happy tweening.
  16. Using a couple spans is a quick fix. https://codepen.io/PointC/pen/MWQQLax/bdc0a02f72d8b44dde218a98bdf30a70 Happy tweening.
  17. PointC

    Timeline delay

    I assume you mean all the black tiles in sequence and then all the white tiles in sequence, correct? If so, you can put them on a timeline. Something like this should work. Note: I used a shorter duration and pause just so you can quickly see what's happening. https://codepen.io/PointC/pen/KKQQJwG/4d48b882af5b14f2b2ea0f8b91b59df3 Is that what you needed? Happy tweening.
  18. PointC

    Tabs + Timelines

    @Dennyno Very cool. I love it. Nice liquid buttons and the particles are so much fun. Well done! 🙌
  19. PointC

    Timeline delay

    Yes, you can use nth-child selectors like that in tweens. If you prefer, you can assign them to an array variable before tweening as well. It's entirely up to you. I used a repeatDelay inside the stagger object because I understood that to be the goal. Each target would yoyo repeat with that delay before the next one animates. The dur variable has the pause added to it so there is an extra 2 seconds before the next element animates as well. The -1 infinite repeat is for the whole timeline. You had a -1 repeat as a default in your original demo so I wasn't sure if that was the goal or not. It's not necessary at all to make this work. More info about stagger: https://greensock.com/docs/v3/Staggers Happy tweening.
  20. PointC

    Timeline delay

    Hi @VahanBio Welcome to the forum. If I understand your question correctly, I don't think a timeline is even necessary here. A stagger tween should work just fine. https://codepen.io/PointC/pen/XWZZBNR/f8f607798c9c5660053574b2ad3202ad Hopefully that helps. Happy tweening.
  21. I'm not 100% sure as I didn't build that demo, but all the sections are stacked on top of each other so this may be a target/z-index issue. If you add the .ignore class to the header, you see it is indeed ignored. Here's another simple example where I've told the Observer to ignore the .green and .orange targets. https://codepen.io/PointC/pen/rNJJyXE/cd77c0fbf45bc990d3baf4213529e43f You can see that the ignore works exactly as expected. I didn't have much time to dive too deep into your forked demo to see the exact reason, but maybe @GreenSock can clarify a little bit. Happy tweening.
  22. I'm not seeing any problems with the demo. If you're loading those images dynamically on your site, you may need to call refresh after they load. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.refresh()
  23. hmmm.. looks like you edited your post to include a list of scripts. Yeah - definitely remove those TweenMax files and make sure to use the latest GSAP (3.10.4). I'd also suggest using ScrollTrigger instead of ScrollMagic. I'm not sure why you're loading both.
  24. Kinda sounds like the animated elements may not be loaded and ready. Are you loading your scripts at the bottom of the page? If not, are you using a load and/or DOMContentLoaded event listener? Make sure custom JS is being loaded after the GSAP scripts. Check the console for errors. You mentioned TweenMax, but you are using the latest versions of GSAP and all plugins, correct? That's about all I can think of without seeing the actual problem. Good luck.
×