Jump to content

Carl last won the day on December 31 2022

Carl had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Carl

  1. glad to hear you got it working
  2. 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);
  3. 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.
  4. i guess that could be a problem. oops. thx again.
  5. 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
  6. 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.
  7. Yes. There is getById() let us know if it doesn’t work. https://greensock.com/docs/v3/GSAP/gsap.getById()
  8. 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
  9. 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!
  10. 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!
  11. 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.
  12. 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
  13. 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.
  14. 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.
  15. 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.
  16. 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.
  17. 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.
  18. 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()
  19. 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
  20. 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.
  21. Hi and welcome to the GreenSock forums. Your gsap code is running BEFORE box is available in the DOM. Move your code to the bottom. Usually best right before the closing </body> tag <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/ScrollTrigger.min.js"></script> <style> .background{ background: white; width: 100%; height: 100vh; } .box{ width: 300px; height: 300px; background-color: black; } </style> <div class="background"> <div class="box"></div> </div> <script> gsap.to(".box",{ x:500, duration: 3 }) </script> Check out my free GSAP beginner's course. I think you'll find it helpful https://www.creativecodingclub.com/courses/gsap-3-express
  22. hi if you're asking for your blue <path> to be moved inside it's containing <svg> so that it aligns with an <img> you have somewhere in a <div> somewhere else on your page, no MotionPath Plugin doesn't do that.
  23. Look for the function-based values section in the Tween docs: https://greensock.com/docs/v3/GSAP/Tween to learn more
  24. thanks for the demo. option 1: instead of using a stagger use a loop to create the animations and add them to the timeline. inside your loop run a condition that checks if you're on the last iteration. if yes, don't add that animation to the timeline. option 2: use a function based value for the autoAlpha property in the stagger. with this technique you can run a condition on each target to see if it is the last or not. based on that condition you can return a custom value. here is a demo for option 2 https://codepen.io/snorkltv/pen/rNvBQYV
  25. Hey @Mamboleoo Thanks for the simplified demo. I'm sure it will help the team. This may very well be a bug that needs to be addressed, however if you intend to animate the x attribute and not an x transform like translateX then use the Attr Plugin. the code below seems to remove the errors. mm.add("(min-width: 800px)", () => { gsap.to('rect', { attr:{x: 100} }); }); However, the code you wrote should work and should animate a transform value just as x, y, scale, etc would for anything else. Also, if you switch your <rect> to a <circle> the error goes away. I assume this all relates to the fact that rect has a proper x attribute and circle, group, and other svg elements do not. I'm sure @GreenSock will give it a look. --- Thanks also to @daniel.mt for the help.