Jump to content

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

PointC last won the day on May 15

PointC had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by PointC

  1. Hi @foundartfactory Welcome to the forum and thanks for being a Club member. Congrats on your first post! 🥳 Blake will probably have some funky math to make this, but I prefer to cheat with these types of animations and animate the viewBox of the SVG. That way I don't need to morph the path or figure out where the target is all the time. I'd do something like this. https://codepen.io/PointC/pen/wvpObWa Happy tweening and welcome aboard.
  2. Yep. Since the stand-alone ScrollTrigger tween and the SplitText timeline have the same trigger, you can add all of the tweens to the same timeline. Like this. https://codepen.io/PointC/pen/vYpPwXM/362d27df4bdb9026630e7b976413cd06 Happy tweening.
  3. I forked the pen and checked debug mode - same thing - no effects. Pulled the whole project down locally - works perfectly with my downloaded Club version of ScrollSmoother 3.10.4. Using the ScrollSmoother file from CodePen (also 3.10.4) - no effects in local testing. Weird. 🤷‍♂️
  4. hmmm... I looked at this earlier today and it was fine, but now I'm seeing the same thing as @Wizard of Oz. Seems like none of the effects are working.
  5. Neither of those links is working for me and none of the required scripts are loaded into the CodePen. There's also a lot of code to parse. Perhaps you could create a minimal demo with a motionPath and couple divs along with your GSAP related question. The simpler the better. That way we can better assist you. Happy tweening.
  6. My original answer demo uses a yoyo tween to go back to progress(0) each time. If you don't want that, you can remove the yoyo and the repeatDelay and instead choose a random progress on each iteration. When you're done with your loop of random animations you can add a stand-alone tween to tween the progress back to zero.
  7. Hey @DeltaFrog If I understand your desired outcome, you'd want to add the ScrollTrigger to the timeline rather than individual tweens. There's a nice example on the ScrollTrigger docs page. https://greensock.com/docs/v3/Plugins/ScrollTrigger A minimal demo would also really help to get you the best answers. Happy tweening.
  8. I'm having a hard time following your question and demo, but I think you just want the aperture animation to play/reverse at various durations and delays. If so, you can create the staggered timeline with the 12 paths and then tween the progress of that timeline forwards and backwards like this. https://codepen.io/PointC/pen/bGaZpVp Hopefully that helps. Happy tweening.
  9. hmmm.. I'm not sure why it would be jerky and imprecise locally. Perhaps there is something else interfering with it or maybe a CSS transition is causing trouble. Hard to say. It's working correctly for me locally and the fork of your demo seems to be fine. AFAIK that is the case. That's why they're available on CodePen and codesandbox to try. Club @GreenSock does have a 100% satisfaction guarantee so I think you can feel pretty safe in joining the Club and using that version. If there are issues, we can assist you further or you can request a full refund if it truly doesn't meet your needs. Happy tweening.
  10. Works fine for me locally too. Are you trying to use the CodePen version of ScrollSmoother locally? I ask because that's a Club plugin and I don't see a Club badge by your avatar yet. The CodePen version won't work outside of that environment.
  11. Seems to work okay for me if I switch it to the built-in .scrollTo() method of ScrollSmoother. https://codepen.io/PointC/pen/VwygzrE/948a4848a8641522e7563b55224cb887 https://greensock.com/docs/v3/Plugins/ScrollSmoother/scrollTo() Hopefully that helps. Happy tweening.
  12. Hi @Idas, That's one of the Most Common ScrollTrigger Mistakes - creating .to() logic issues. When you target the same property of the same element in multiple ScrollTriggers, you need to use immediateRender: false, .fromTo() tweens or a timeline. https://greensock.com/st-mistakes/#to-issues https://codepen.io/PointC/pen/yLpZJBG/c5debd87e814df47d92a60f751467d55 Happy tweening.
  13. Blake beat me to it, but here's a fork with CSS variables instead. https://codepen.io/PointC/pen/gOoZQYX/3a4b5fc25edb32f1d52addb5e646b0e2 Happy tweening.
  14. All good my friend. Still helping as many people as we can around here. You probably missed the launch of my tutorial site during your hiatus. https://www.motiontricks.com/ Let us know if you have any questions diving back into GSAP. Happy tweening.
  15. I thought that name sounded familiar. Welcome back and good to see you again @smallio. Where have you been hiding the last few years?
  16. Here are a couple demos from other threads that may point you in the right direction. The first uses a clip-path to reveal the bottom layer and the second uses a mask. Good luck and happy tweening. https://codepen.io/PointC/pen/XWXvpBd https://codepen.io/PointC/pen/rrgVvO
  17. That looks correct. Your repeats seem odd because you tween the progress of the child from 0 → 1 and then 1 → 0. At that time the child is back to the beginning so it naturally plays if it isn't paused. (using the normal durations and eases) I did not have the child paused in my first example so that may have been confusing, but I was only tweening the progress to 1 so it was already at the end and couldn't play again. I've paused it now for clarity. I wouldn't recommend adding tweens to a child timeline after you've added the child to a parent as that could give some odd results. Either add more tweens to the child before you add it to the parent or make a second child. You can use the index to create some conditional logic for the tweens (like in the referenced article). Function based values are pretty powerful animation techniques. But you don't necessarily need the index and element as GSAP also has baked in randomizing too so you can do something like this. gsap.to(yourTargets, { duration: 1, y: "random(-100, 100, 5)" }); I'd recommend the getting started guide Our own @Carl has a wonderful course here: https://www.creativecodingclub.com/courses/FreeGSAP3Express?ref=44f484 Have fun.
  18. Of course wrap() was made for this. (and is the better answer) You should always choose the GSAP solution whenever possible.
  19. You could so something like this: for (const char in mySplit.chars) { gsap.set(mySplit.chars[char], { color: colors[char % colors.length] }); } Makes it a little more concise. Not that there is anything wrong with what you did. Happy tweening.
  20. I think you'd just want to fire your toggleAnimation for the first (or any) target. toggleAnimation(menus[0]) https://codepen.io/PointC/pen/LYeXVGp/8c41c65452d55975167840c9e0daef37 Hopefully that helps. Happy tweening.
  21. I'd recommend caution using non-scaling-stroke and preserveAspectRatio="none" as they can deliver some pretty unexpected results. It's not a GSAP thing. Here's a quick example animating a stroke with CSS and the path length = "1" trick. Stretch this out pretty wide and you can see how it's not what we'd like. Just my two cents. YMMV. https://codepen.io/PointC/pen/QWaZrom/3a5f6d39321cfaeb0db4802485adb8c7
  22. I don't think that will be a problem at all. The span will keep its padding. You can put it inline like your post or in the CSS like this demo. I upped the px just to make it obvious. https://codepen.io/PointC/pen/VwyEwrV/011a35f55d004804f75ec405534ddfb8 Happy tweening.
  23. PointC

    GSAP 4

    I think that's from the Most Common GSAP Mistakes post. https://greensock.com/mistakes/#syntax
  24. When you add() you have two parameters 1. What are you adding? Tween, Timeline, Label, etc. 2. The position parameter https://greensock.com/docs/v3/GSAP/Timeline/add() t2.add(t1, {ease: "sine.inOut"}); This doesn't simply add a new ease to timeline 1. Here's a stripped down example of a parent timeline tweening the progress of a child. https://codepen.io/PointC/pen/OJzoRQx See how the child timeline has a duration of 1 second, but now I've handed control to the parent and really upped the duration to make it obvious. We're just tweening the progress of the child. You can do other things like the timeScale() or time(). You can also see how the power4 ease is obvious when tweening the progress, but notice the child timeline tweens have no ease at all. I'm honestly not sure why you're tweening timelines with other timelines in this case. It seems like it would be a straightforward single timeline. Reveal the cursive text. Lens aperture stagger Reveal the word photo. But maybe I'm missing something.