Jump to content
GreenSock

Carl last won the day on October 13

Carl had the most liked content!

Carl

Moderators
  • Posts

    9,681
  • Joined

  • Last visited

  • Days Won

    540

Everything posted by Carl

  1. Start with the gradient animating through the text https://codepen.io/snorkltv/pen/QWrYvJV Next Steps Add ScrollTrigger to the animation add scrub:true modify page so that you have room to pin the text and have enough room to scroll
  2. No problem! Animating a single tween with ScrollTrigger is exactly where you should begin. Watch the video in the docs https://greensock.com/docs/v3/Plugins/ScrollTrigger this tutorial also will help Also this great short video from @Cassie will help too! Let us know where you get stuck and we'll jump in to help with your minimal demo.
  3. Hi, This can be achieved with a basic stagger https://codepen.io/snorkltv/pen/qBYLwXQ?editors=1010 I have a Free GSAP beginner's course that I think will be great help. https://www.creativecodingclub.com/courses/gsap-3-express
  4. do you have an example of this? this seems like an interesting challenge but it would be best to provide a minimal demo so that we can better understand what you are trying to do. This isn't typically the type of thing we just build up from scratch on request. Also a question: When you say "pressing a button has it go to 100% slowly" does that mean pressing and holding down or pressing multiple times in quick succession. Trying to better understand the game mechanics and see what features of GSAP might help you best.
  5. Thanks, for the mention @Rodrigo the ScrollTrigger course isn't free. Just the GSAP 3 Express beginners course. However, I'd like to think the complete course bundle offers a ton of value at my re-introductory pricing of $2.95/month
  6. Thanks for the demo. I think gsap.utils.mapRange() can help https://greensock.com/docs/v3/GSAP/UtilityMethods/mapRange() it will basically convert the progress to a value between 0 and the highest index of elements these are the values I'm passing in mapRange(lowest progress : 0, highest progress : 1, lowest index : 0, highest index : 4, current progress) let index = Math.floor(gsap.utils.mapRange(0, 1, 0, 4, self.progress)) setdoputText(index) console.log("index", index) /* if (self.progress > 0 && self.progress < 0.2) { setdoputText(0); } if (self.progress > 0.2 && self.progress < 0.4) { setdoputText(1); } if (self.progress > 0.4 && self.progress < 0.6) { setdoputText(2); } if (self.progress > 0.6 && self.progress < 0.8) { setdoputText(3); } if (self.progress > 0.8 && self.progress <= 1) { setdoputText(4); } */ test it out with a few variable numbers of elements and see how it goes. Although I don't know everything about your project, I wouldn't use this approach of assessing the progress using onUpdate. onUpdate fires VERY OFTEN and and it seems wasteful to be constantly re-applying classes and running logic. ScrollTrigger already has toggleClass functionality built in. You just have to create ScrollTriggers for each element like so https://codepen.io/snorkltv/pen/rNvKQQb Note the text turns green when active. Hopefully this helps
  7. Hi @Sismeo Thank you for the clear demo. I spent some time exploring this and couldn't quite explain exactly why things were appearing this way. @Cassie Ah, this seems to be the missing nugget! Thanks for that! One of the bigger things I couldn't wrap my head around was why taller items with the same speed as other items were moved in seemingly weird places. Now that I know that everything has to be in it's "native" position when it hits the center of the screen all of this makes much more sense. I created a new pen that hopefully clearly illustrates this behavior for others. Probably best viewed in it's own, taller window. https://codepen.io/snorkltv/pen/vYjrKWX?editors=1100 Also a little tip for everyone that doesn't want to go crazy. If you have codepen configured to auto-update (no run button) it seems that some css changes will be updated on the fly but it's not a real reload as the ScrollTriggers will not refresh and update. I strongly recommend disabling the auto-update when working with ScrollTrigger in codepen. Thought I was going nuts for a bit.
  8. Carl

    SVG animation

    The course is still under construction and I'm going to be actively adding to it for the next few months. However, with the viewBox, viewport and preserveAspectRatio stuff out of the way I feel like i have provided an extremely firm foundation of the basics. There is enough there (23 lessons) to keep you busy prepare you for the more advanced things I have in store. Although I may still have a few easy lessons that could fall into the "basics" section it's not like its going to mess you up. It's not like there's really any proper or any 1 concept is all that much harder to understand than another. Soon I'll be getting into more interesting things like dynamically creating svg elements, animating filters, gradients, morphing, masking etc etc. Short story. Jump in now. No harm.
  9. that's a pretty cool effect. thanks for the demo. Inside the first loop you have access to the index of the text button so you can use that to target its respective digit. https://codepen.io/snorkltv/pen/MWGVmqq?editors=1010
  10. Carl

    SVG animation

    thanks for the assist, @Cassie those are lovely illustrations. I'm currently working on showing folks how to fit a very tall and thin monster into a square or variable size viewport. Yes, the background-size metaphor is very helpful and I have a reference to it in there. Not sure where I heard it first but maybe it was you! Thanks so much! Carl
  11. Carl

    SVG animation

    @mvaneijgenHa. Yeah, I'm going to be or atleast I keep saying that I am going to be putting more lessons out on youtube so brace yourself for some more videos you may have already seen. I appreciate all the support! One of these days I'm going to quote you "Working with SVG on the web requires some elbow grease to get the files really clean." So much truth in there! I'm getting into my dreaded preserveAspectRatio lesson but I think I found some ways to keep it simple and have it make sense. Stay tuned!
  12. Carl

    SVG animation

    Thanks so much, @Cassie!
  13. hi Penni, you can use the svgOrigin https://codepen.io/snorkltv/pen/dyeJrVJ I don't think your dashed circle is perfectly centered which is why using the center of the svg doesn't look exactly right. learn more about svgOrigin or you can modify the transformOrigin so that it lines up with the center of the dashed path kind of like... https://codepen.io/snorkltv/pen/gOzoEGB?editors=1010
  14. Carl

    SVG animation

    Hi @NickWoodward Thanks so much for the kind words. Yes, I highly recommend you dive into the SVG Animation lessons. Can't believe I have over 20 of them already. Here's the demo from this week https://codepen.io/snorkltv/pen/JjvyKPZ And if you want zooming backgrounds, definitely check out the recent lesson on viewBox! https://codepen.io/snorkltv/pen/rNvYVxX?editors=1010 As far as the chickens that @Rodrigo mentioned you can get a peek at these old tweets (made in Animate) Rodrigo you get ⭐⭐⭐⭐ for remembering projects from 2018! Great having you back around the forums, buddy. I enjoy reading your clever solutions!
  15. Hi Jhey, There have been some issues in 3.11 that the team has recently ironed out. Please try this latest beta of 3.11.2. I'm sure the team will be interested to hear the results. https://assets.codepen.io/16327/gsap-latest-beta.min.js If there are still problems, probably best to lock it in to version 3.10 or whatever works best. That latest beta url should only be used as a short term fix as it could potentially break sometime down the road. Pretty sure the plan is to get 3.11.2 out as soon as possible
  16. there was a regression recently. please try the latest beta version provided here if you still have problems please provide a minimal demo
  17. you are pausing the timeline at the beginning with progress(0) pause() and then placing the set() at the end of the timeline. It would be more appropriate just to use gsap.set( "#sticky-elem" , { clearProps: 'all' }); this is not associated with a placement in the timeline and will be called immediately. you might also use timeLine.revert() https://greensock.com/docs/v3/GSAP/Timeline/revert() I don't know enough about what you are doing to know if one is better than the other.
  18. thanks for the demo. Some issues with what you had You created 1 timeline outside of the forEach loop. Inside the loop you were creating tweens that had ScrollTrigger options but no animation settings outside the loop you were creating 2 tweens that had nothing to do with what was happening inside the loop. Possibly just some formatting issues crept in over time. What you want is to create a timeline for each section with it's own ScrollTrigger settings and tweens as shown below https://codepen.io/snorkltv/pen/ZEoyrXL?editors=0110 also your .fade elements all started with an opacity of 1 so animating to 1 wasn't doing anything. I set their opacity:0 in the css.
  19. glad to hear you got it working
  20. Sorry, without seeing the code that error doesn't give us much to work on. There is nothing in the example I provided that requires the use of a plugin. My only guess is that whatever you are tweening the progress of isn't an animation with progress() method. 🤷‍♂️ perhaps before the tween that gives the error you can log console.log(animation) // does the target of your tween exist? console.log(animation.progress()) // does it have a progress() method //your tween gsap.to(animation, {progress:value}); replace "animation" with the name of the tween you are controlling. you may have to register ScrollTrigger, but I don't think it's related to that error. gsap.registerPlugin(ScrollTrigger);
  21. thanks for the demo. you can tween the progress() of an animation like so gsap.to(animation, {progress:value}) https://codepen.io/snorkltv/pen/rNvmPaj?editors=1010 Your demo did not include ScrollTrigger so I'm not exactly sure how you intend to use that. With ScrollTrigger animations you may need to force the page to scroll using ScrollToPlugin. https://greensock.com/docs/v3/Plugins/ScrollToPlugin feel free to fork and modify the demo to make it more clear how ScrollTrigger will be involved.
  22. i guess that could be a problem. oops. thx again.
  23. thx for the clarification. It still looks like ScrollTrigger interferes in some way. My getById() function is called 3 times before the animation is triggered (immediately on page load) when the animation begins (via onStart) 3 seconds into the timeline playing (via timeLine.call()) all 3 times gsap.getById("timeLine") returns undefined. scroll down to start the animation https://codepen.io/snorkltv/pen/dyeWOMq?editors=1111
  24. thanks a bunch for the demo. very helpful. I noticed that if you remove ScrollTrigger and click during the animation it works. If you click after the animation is done playing it will be "undefined" even though you are using a variable as the docs suggest If you need to maintain a reference to an animation even after it completes, you should use a variable Here is a reduced demo without ScrollTrigger https://codepen.io/snorkltv/pen/dyeWOMq?editors=1011 I'm guessing something is wrong somewhere. I'm sure the @GreenSock team will be able to look into this further when office opens back up. Thanks for your patience.
  25. Yes. There is getById() let us know if it doesn’t work. https://greensock.com/docs/v3/GSAP/gsap.getById()
×