Jump to content

Carl last won the day on October 13

Carl had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Carl

  1. 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
  2. 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!
  3. 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!
  4. 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.
  5. 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
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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()
  12. 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
  13. 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.
  14. 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
  15. 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.
  16. Look for the function-based values section in the Tween docs: https://greensock.com/docs/v3/GSAP/Tween to learn more
  17. 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
  18. 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.
  19. Hi and welcome to the GreenSock forums, In cases like this it really helps to provide a minimal demo as the code you displayed only tells a portion of the story. It's nice to see all the things you've tried, but if you are combining them all at once it's likely some techniques may cancel out others making it very hard for us to know what is causing the issue. Also mixing css animations and gsap is bad practice and can further complicate how your code is being executed. I'm curious why you are using a jQuery each loop on #Dog. An element with an ID should exist only once which means there really shouldn't be anything to loop through. If you have multiple #Dog elements this certainly could be causing a problem. I would strongly suggest getting this to work on a single dog first before you worry about looping and creating multiple animations for multiple sections. to make things easier for you below is a very bare bones demo that shows a single tween being played when the #dogContainer's center passes the center of the viewport for the first time. https://codepen.io/snorkltv/pen/ExEqOVK Feel free to fork the demo and add your html, css, and javascript. The demo already loads GSAP, ScrollTrigger and jQuery. Once you get your dog moving OR we see a minimal demo of what you've tried then we can move forward and tackle individual issues / features.
  20. Hey @NickWoodward I think @GreenSock was actually saying that keeping everything in one timeline also isn't good. In situations like this where there are multiple different states that you have to navigate through it is better to dynamically create tweens instead on demand. based on your loop I assumed there would one day be multiple arrows and only 1 would ever be active at a time (facing up or down). You have 3 states: right, up, and down. Clicking when direction is right OR up spins the arrow down. Clicking when the arrow is down can only spin it up. Clicking an arrow can only spin it up or down so there is a conditional check that will create the proper tween. Once you interact with an arrow I loop through all the arrows and reset all the ones you aren't clicking on. There are probably half a dozen ways to handle this, but this was the easiest for me to get working quickly with the least amount of code. https://codepen.io/snorkltv/pen/bGvyXQY?editors=0010 I have a 3 Part series: Breaking Free of the Timeline Mindset in my B-sides, Bonuses, and Oddities course. It highlights why timelines aren't great when you need a high level of interactivity AND how creating functions to handle state changes is much more flexible. hope this helps. Carl
  21. yeah, like @Cassie mentioned you are changing the height of the page by changing the height of the accordion elements. When you use pin spacing GSAP is measuring the height of your wrapper and setting it as an inline style in your pin-spacer AND your wrapper. You can verify this doing an element inspection. You need this height to be locked so that the page has space to scroll through as your animations happen. So even though your animations are shrinking the height of the accordion items the wrapper is still staying "locked open" at full height. I would instead reach for a solution similar to GreenSock's layered pinning demo https://codepen.io/GreenSock/pen/KKpLdWW I have a deconstruction video in my ScrollTrigger Express course here https://www.creativecodingclub.com/courses/take/scrolltrigger-express/texts/15813029-layered-pinning (student link) ... thanks for being a Creative Coding Club member. The basic idea would be to take the accordion elements out of the document flow and animate them using a transform, in this case y or yPercent. You may need to do some dynamic measuring and positional setting to get everything to be spaced properly. OR you could maybe change your document structure so that the footer (or whatever section comes next) is wrapped inside the last accordion element. This way it would be perfectly "attached" to the accordion. Hopefully having a solid understanding of the problem and some of these suggestions will help you better find a solution. BTW cool job on the demo! I dig the way it looks.
  22. Carl


    For a little walk down memory lane... the vars object goes all the way back to the ActionScript 2 version of GSAP as you can see in the source code here. If one were to dig into the ActionScript 3 documentation you could find note of it here. Being that GreenSock had loads of faithful Flash users and a proven API, much of what was available in the Flash days made it over into the JS version and is still around today although version 3 was a major overhaul which greatly trimmed a lot of fat. Since the vars term was so grounded in the history of the API it kind of stuck around for awhile. I believe some folks prefer the term config object. However, the documentation for gsap.to() pretty much sums it up vars - an object containing all the properties/values you want to animate, along with any special properties like ease, duration, delay, or onComplete (listed below). basically the vars object has all the stuff in bold below gsap.to(obj, {x:300, y:200, delay:2, repeat:3, onComplete:done}) Hopefully this helps
  23. So good to see and hear of all the progress! Please stop running through the videos and learning so quickly. I need time to make more
  24. A similar technique is used to "open and close" items in this Creative Coding Club demo https://codepen.io/snorkltv/pen/BaLWxLW Student Link to Lesson Video: https://www.creativecodingclub.com/courses/take/b-sides-bonuses-and-oddities/lessons/19117678-auto-close-open-item-reverse-current-timeline
  25. I think this should do the trick https://codepen.io/snorkltv/pen/XWEodKZ?editors=1010 for each blurb you can call querySelector() like so gsap.to(blurb.querySelector(".image-container img")...