Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

ZachSaucier last won the day on November 12

ZachSaucier had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


ZachSaucier last won the day on November 12

ZachSaucier had the most liked content!

Community Reputation

1,206 Superhero


About ZachSaucier

  • Rank
    Advanced Member

Contact Methods

Profile Information

  • Gender
  • Location
  • Interests
    Frontend development, soccer, board games, theology

Recent Profile Visitors

3,113 profile views
  1. Hey Pata, It looks like you linked the original pen without any changes? Did you mean to do that? We're happy to help with errors that you're running into but it'd be good if you showed what you're having trouble with in the demo pen. What's your end goal here? And are you going to use GSAP 3 or GSAP 2?
  2. Hey Iamattamai, The following function seems to work to put the arms down for me: function armDown() { tt = gsap.timeline() tt .to(".g06", {duration: 0, visibility: 'visible', stagger: -.05}) .to(".g06", {duration: 0, visibility: 'hidden', stagger: -.05},.05) .to(imageList[0], {visibility:'visible'},"-=.01") }; To use reverse you'd need to create the timeline then go to .progress(1) and then .reverse() it.
  3. The repo is private until the next version is released. Maybe Jack can send you a copy? Tomorrow is Sunday for us so he might not be as available as usual.
  4. First off, where the heck did you get that curve from? That's an insane amount of points for a shape so simple, haha. The main difficulty is setting up your SVG correctly. So you should go ahead and recreate the exact shape that you need. To create a fade like that you could create two ovals (probably using <ellipse>s), one with the blueish color fill and one with a white fill (or whatever the background color is going to be). Then offset the white one, maybe adjust its height, and make sure it's on top. Once you have that, then create a path that goes around all of the visible (blue) area. You can do that by duplicating the blue oval and then converting it to a path. GSAP's MorphSVG has that conversion functionality built in. Make sure that it has a thick enough stroke-width to cover the blue in all sections. If you constructed your SVG like I described, then you don't even have to turn the path into a mask, you can just leave the stroke as white. Thus in your SVG you shouldn't see anything because the white oval and path with stroke should be covering your blue part. But if you delete the path with stroke you should see the shape that you have above. Then in your JS you can use drawSVG on the path with stroke to hide it, i.e. something like TweenLite.to("#pathWithStroke", 1, { drawSVG: 0}); or in GSAP 3 gsap.to("#pathWithStroke", { duration: 1, drawSVG: 0});. And voilà! You will have the animation that you need. Here's a really rough implementation of it. https://codepen.io/GreenSock/pen/BaaGvqW If you need help animating it from a certain point see this thread, but hopefully you create your SVG in such a way that this isn't necessary
  5. Can confirm this bug @GreenSock. Thanks for posting Jon.
  6. I really don't understand what you're trying to do here Some notes about your code though: It's good to use gsap.timeline instead of new TimelineMax. GSAP's delayedCall is more reliable than a setTimeout. If all you have is one tween within a timeline there's usually not much of a point of adding it to a timeline. You can assign the ID to the tween if you'd like and it'd work the same way. You have gsap.set(source, {...target}) but target is already an object so you could just do gsap.set(source, target) if you want. I'm glad you got it working for your needs!
  7. We moved it into the vars parameter so that it can be used with defaults/inheritance. The v2 syntax may not be supported whenever GSAP eventually moves on to v4. Maybe passing in specific values to the clearProps would be viable?
  8. Hey Shakespeare and welcome. You can do this sort of thing by animating a mask. The thread below gives more info on how to do it: Let us know if you need more help!
  9. Or kill the animation and start the new version right where they were when it stopped? AFAIK, without modification to how timelines work, yes. Timelines are meant to be set so they can be seeked through forwards and backwards. Otherwise you should be using chained tweens.
  10. If they change the window size, you should kill the old timeline and create a new one with the correct values.
  11. I understand that is your setup. I don't understand why you can't use one of the approaches that I've outlines in the posts above.
  12. Can you just put the function call in the fromTo's onComplete? https://codepen.io/GreenSock/pen/rNNQGva?editors=0010
  13. Hey PinzOne and welcome to the forums! We're so glad that the forums have been able to help you without the need of posting I think it'd be helpful to see a basic demo of your setup. But using onComplete to create a new random animation is likely what you need to do. It's just hard to give more info past that without a demo
  14. It's hard to say without the ability to see it for ourselves. Guessing somewhat blindly, it could be because the overwrite property has a different default in GSAP3. In GSAP 2 it was "auto" by default but in GSAP 3 it's false. You can test it by putting gsap.defaults({overwrite:"auto"}); to the top of your script. Side note, it's good to put the duration inside of the vars parameter.
  15. Hey Sichtweise and welcome to the GreenSock forums. A few notes: I recommend GSAP's delayedCall over a setTimeout for the increased reliability. I personally prefer using GSAP's .set() over jQuery's .css() (jQuery is not really necessary too helpful in most projects these days) but you can use whichever. In GSAP 3 you should be using gsap.timeline instead of TimelineMax. The duration should go in the vars parameter in GSAP 3. Now to the core of your question: Why does it fire twice? You can figure it out yourself by console.logging the values of window.scrollY, scrollYOld, and complete inside of your function that checks whether or not to run your animation. You will notice that both times window.scrollY != scrollYOld. This is because in your logic you are updating scrollYOld as soon as you run the animation instead of after the last update to the scroll position. So if you update scrollYOld inside of your onComplete (like where you update complete) it will work as you want it to. https://codepen.io/GreenSock/pen/gOOQmxr?editors=0010