Jump to content
GreenSock

Carl last won the day on August 21

Carl had the most liked content!

Carl

Moderators
  • Posts

    9,648
  • Joined

  • Last visited

  • Days Won

    539

Carl last won the day on August 21

Carl had the most liked content!

About Carl

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

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

  1. 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
  2. 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
  3. 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!
  4. Carl

    SVG animation

    Thanks so much, @Cassie!
  5. 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
  6. 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!
  7. 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
  8. there was a regression recently. please try the latest beta version provided here if you still have problems please provide a minimal demo
  9. 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.
  10. 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.
  11. glad to hear you got it working
  12. 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);
  13. 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.
  14. i guess that could be a problem. oops. thx again.
  15. 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
×