Jump to content
GreenSock

Carl last won the day on August 21

Carl had the most liked content!

Carl

Moderators
  • Posts

    9,643
  • Joined

  • Last visited

  • Days Won

    539

Everything posted by Carl

  1. 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!
  2. 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
  3. there was a regression recently. please try the latest beta version provided here if you still have problems please provide a minimal demo
  4. 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.
  5. 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.
  6. glad to hear you got it working
  7. 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);
  8. 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.
  9. i guess that could be a problem. oops. thx again.
  10. 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
  11. 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.
  12. Yes. There is getById() let us know if it doesn’t work. https://greensock.com/docs/v3/GSAP/gsap.getById()
  13. thanks for the demos. it clearly looks like there is a problem in the latest version. I reduced it even further just to show that it seems that the issue is closely related to the textContent value on a from() tween. hopefully this helps the @GreenSock team troubleshoot and offer a solution for you. the pen below is using one of the latest-beta versions I found in another thread thanks for your patience https://codepen.io/snorkltv/pen/poVeOOg
  14. Carl

    SVG animated graphs

    Yup, and just to add a bit. GSAP is AMAZING at animating SVG elements. This video breaks it down Taking the storyboard you supplied I very quickly did an animated mockup just to give a rough idea how something like this can come to life with a few lines of code https://codepen.io/snorkltv/pen/NWMdjxd?editors=1111 I did that in about 5 minutes and you could probably learn exactly what all that code means if you spend some time learning the basics of GSAP and SVG. I provide the demo just to give you a little push in the right direction and to show that it isn't necessarily complicated or overwhelming. This lesson may help as well when it comes to understanding the SVG and GSAP workflow This interactive graph by SVG Master @chrisgannon does a great job showing what is possible after investing loads of time honing your craft https://codepen.io/chrisgannon/pen/pbzEYr Be sure to drag the dot around. How cool is that? So yes, pretty much anything you want to animate on an SVG graph is totally possible with GSAP and you don't have to go crazy trying to make it work. If you need help getting started with GSAP I have a free course here and I'm about 17 lessons into my SVG beginner's course. hope this helps!
  15. In your latest demo I may not have followed exactly but if you re-add() tween1 and tween2 after you mess with their duration or startTime() it seems to work. I log duration() of 4 twice https://codepen.io/snorkltv/pen/PoebJEm?editors=0011 However, I don't want to get off track. You shouldn't have to do this as @GreenSock previously noted. I tried using the uncache() method but maybe I was using it wrong as I couldn't get it to help your latest demo. Please stay tuned. Finding solutions for these types of issues can take some time to troubleshoot and test properly. Sounds cool. Sign me up!
  16. Hi @Denis Gonchar First, thanks for the super-clear AND reduced demo. Kind of rare that we get to work with demos like this Your demo does a great job of proving that updating the duration of the tween doesn't seem to impact the duration of the timeline. Whether or not that is a bug or just unexpected behavior I'll allow @GreenSock to address. For now, a valid workaround could be that you just re-add() the tween to the timeline AFTER you adjust it's duration. timeline.add(tween, tween.startTime()) In the demo below the timeline starts with the tween having a duration of 2 and startTime() of 1. This gives the timeline a duration of 3. I then adjust the duration of the tween to 4 and re-add() it using it's stored startTime() of 1. This gives the timeline the expected duration of 5 https://codepen.io/snorkltv/pen/bGMwdyQ?editors=0011 Also note, this does not require an invalidate() call. While we're all here, I'm curious what the use case is where you need to adjust the duration of a tween after it's in a timeline. I'm guessing that maybe you are working on a sort of GUI where the user can build their own animations. If yes, you may just want to rebuild the entire timeline every time an adjustment is made to a tween. A very general approach would be to use an object to store all the starting values, durations, and start times of all your animations. Every time something needs updating just destroy the timeline and rebuild it. Just guessing this might be helpful. Interested to hear what you are up to.
  17. This sounds a bit like one of my lessons. Perhaps this demo will help https://codepen.io/snorkltv/pen/KKmVgpB?editors=1010 It's got a bit extra going on to make the text "unsplit" on resize and also re-init devtools. I'm doing a character-by-character animation on each line which is why I have to loop through each line. If you need to learn more about how this is set up give the courses in my signature below a look
  18. maybe I'm reading this wrong but for I think that could just be "60% bottom" https://codepen.io/snorkltv/pen/jOxqVWJ the trigger div has a darker blue background to show 60% of its height (using a percentage-based gradient) the animation stops as soon the lighter blue portion becomes visible.
  19. hi @karljohan108 thank you for providing the clear demo that shows the fromTo() tween is not completing if you press the button before the 5 second delay. I don't have an explanation for you but I'm sure @GreenSock will chime in once it is investigated further. Thanks for your patience.
  20. please watch the video on fastScrollEnd and prevenOverlaps found at There is a great demo there, but be sure to watch the video as it goes pretty deep into the details.
  21. just for kicks I made a quick test showing a timeline, its child tween, and an independent tween all completing when the globalTimeline gets progress(1). https://codepen.io/snorkltv/pen/ExLjzzp?editors=1111 click the button within 20 seconds or re-run the demo. logs shown in console "child complete" "timeline complete" "independent complete" you can use this as a starter file or create your own codepen or codesandbox minimal demo. the simpler the better.
  22. start here. https://mgearon.com/css/css-background-clip-text/ here is a stripped down demo i had showing the text shrink https://codepen.io/snorkltv/pen/NWMqzGW google "css clip mask text" for more. not really sure how to handle video. you may have to use canvas.
  23. it may be as simple as calling gsap.globalTimeline.progress(1) https://greensock.com/docs/v3/GSAP/gsap.globalTimeline if that doesn't work or causes issues with gameplay try exportRoot() var tl = gsap.exportRoot(); tl.progress(1) https://greensock.com/docs/v3/GSAP/gsap.exportRoot()
  24. thanks for the video. I don't have any windows / android devices. In the demo below I'm rotating the <text> element. Does that give more consistent results? https://codepen.io/snorkltv/pen/oNdgJVd @GreenSock may be able to shed more light on this, but please understand the company and support staff may be observing holiday hours today
  25. Hi, Thanks a bunch for the demo. I'm not sure I am understanding the issue. The text seems to be rotating fine. Your <path> has an ID of "circle-text-path" <path id="circle-text-path" d="M 400 250 A 150 150 0 0 1 250 400 A 150 150 0 0 1 100 250 A 150 150 0 0 1 250 100 A 150 150 0 0 1 400 250 Z" ></path> And your tween is targeting that path and rotating it tl.to("#circle-text-path", { rotate: 360, transformOrigin: "50% 50%", repeat: -1, duration: 10, ease: "none" }) GSAP seems to be doing exactly what it should and I'm pretty sure targeting the actual <path> and not the <textPath> is the way you should do it. I forked your demo, removed gsap and tried to modify the <textPath> via css and it didn't seem to have any affect textPath, { stroke:red; stroke-width:2px; transform:translateX(200px) scale(4); } https://codepen.io/snorkltv/pen/MWGYzNM?editors=0100 Again, it looks like your demo is working fine. If you are expecting other behavior or you can show something that doesn't work we can look into it further.
×