Jump to content

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

Carl last won the day on May 28

Carl had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by Carl

  1. As Zach said, there really is quite a bit that goes into this that isn't directly tied to GSAP. GSAP's only role is really going to be a small matter of animating the width, scale, or opacity of a few things. The majority of the trouble is going to be with the css layout you choose and programming the logic for the opening and closing of certain elements. below is a very basic example of how you can use a loop to target different things and apply the same animation to them. Each expander element has animation that increases it's width and reveals a close button. The animation plays
  2. when I want a bunch of things to move with random values for duration, repeatDelay, and end values I'll create a function that creates a tween for any element that is passed into the function. When the tween is done I pass the target of the tween back into that function using onComplete and onCompleteParams. In the example below I loop through all my bugs and pass them into the moveMe() function. https://codepen.io/snorkltv/pen/GRjqbjN?editors=0010 Using this same approach you have a ton of flexibility to add things like "rotate to new direction" and "consta
  3. Hi @monema I guess which approach you choose will depend on your needs but a few things to clarify adding a pause() inside a function inside a timeline isn't accurate and can cause problems when reversing (which is why addPause() was created) If you want to put a bunch of conditional logic inside the timeline that is synchronized with a pause its probably better to use addPause() with a callback tweenTo() and tweenFromTo() don't require any calculation of duration which is a big part of their convenience. tweenTo() and tweenFromTo() allow callbacks just like any tween
  4. Hi, this is a perfect use case for tweenTo() or tweenFromTo() Video below should help Docs for tweenFromTo()
  5. another approach I use for this type of thing is the " @shshaw grid layering technique " static version of multiple fullscreen divs sitting on top of each other https://codepen.io/snorkltv/pen/JjYJpgw?editors=1100 here I apply it to list items with some animation https://codepen.io/snorkltv/pen/0d22106a0c7dca4d4e01a583bb739d37?editors=1100
  6. In order to do that you'll need to make sure your css is set up to have panels be on top of each other I just took GreenSock's sliding panel demo https://codepen.io/GreenSock/pen/qBdzqmR?editors=1010 and made the pen below by removing the blue panel and changing the tweens to opacity https://codepen.io/snorkltv/pen/ZEpbbpQ?editors=1010
  7. nice tips. using set() with innerText is cool. I never thought of that. I always reach for TextPlugin but I'll save that for when the text value needs to animate between states.
  8. the trick here is to use function-based values. the demo below shows random duration and x value for each bug https://codepen.io/snorkltv/pen/yLJWgdy?editors=1010
  9. thanks @ZachSaucier and @GreenSock it makes sense now. I had my thinking flip-flopped. I thought "align" was for the thing you wanted stuck to the path. not the path you wanted things aligned too. I should have watched the video in the docs first. It cleared it all up.
  10. Hi @GreenSock The pen below shows the problem I had earlier. I think I kind of know what is going (an additional offset is being applied) on but don't know what the proper way to fix it is. I just want the second tween to start at the end of the path and go back to the beginning. The second tween works as expected if the first tween is commented out. Currently the second tween has a start value that is way over to the right. https://codepen.io/snorkltv/pen/yLJQMPG?editors=0110 What's interesting to me is that in @fluxus original demo
  11. Thanks for the demo. I had success animating the smallBirdWrapper along the path and flipping the smallBird inside it. To accomplish this I created one tween of the birdWrapper on the path. I then built a timeline that used -tweenTo() to play the motion path tween forward -a tween to flip the scaleX of the smallBird (3D transforms aren't supported in all browsers for svg elements) -another tweenTo() to play the path animation in the other direction My demo https://codepen.io/snorkltv/pen/PozxGaE?editors=0110 My com
  12. That's a fantastic demo. I've followed a few online rubik's solve tutorials in the past. This clearly has potential to be the best. Please post back in this thread when you have it all working. Would love to check it out and share with folks. Geat job!
  13. oh, and here is a video that explains the GSAP object, tweens and timelines
  14. Hi, TweenLite and TweenMax are tools in older versions of GSAP. The short answer is TweenMax had more features than TweenLite. TimelineMax and TimelineLite (also old) provided ways of sequencing multiple tweens. Unless you are updating an old legacy project you probably shouldn't bother learning them. Things ARE MUCH LESS confusing in GSAP 3. If you want to get started with GSAP 3, my beginner's course is totally free right now. https://www.creativecodingclub.com//courses/FreeGSAP3Express
  15. It sounds like you want to tween to or from a frame. I suggest the easel plugin https://greensock.com/docs/v2/Plugins/EaselPlugin It would really help to see a very basic example as I’m not understanding the question fully.
  16. I just downloaded your file and it worked perfectly for me. thanks for providing it. I'm guessing you may have an older version of Animate. There was a problem where scripts on frame 1 could not access movieclip children. You had to wait a frame or wait for some frame_rendered event or something dumb. In Animate 20 it works fine. It was one of my biggest issues with Animate.
  17. GreenSock has utility function called wrap() which allows you to wrap (or cycle) through array values. This means you don't have to increment and reset your curColor value. It can keep going up and up and gsap will pull the proper color from the array. gsap.to("#morph", { backgroundColor: function() { return gsap.utils.wrap(colorArray, curColor++) }, duration: 0.5, repeatDelay: 0.1, repeat: 100, repeatRefresh:true }); https://codepen.io/snorkltv/pen/VwaJJBN?editors=0010 I have a free wrap() tutorial on my blog with video and dem
  18. I'd happy to help with this. Thanks for the demo. There were a few issues with your demo. The biggest was that you had a function on an onComplete but an animation will never complete with repeat set to -1 (infinite). The trick is to use the onRepeat callback In order for the backgroundColor value to get re-applied it needs to be a function-based value AND you need repeatRefresh to be set to true. repeatRefresh means that values will get invalidated on repeat and function-based values will be re-evaluated. here are my modifications to your demo h
  19. Carl

    Pause timiline

    this seems to work https://codepen.io/snorkltv/pen/mdPaggN?editors=1111
  20. Carl

    Pause timiline

    paused() is intended to be used outside of a timeline, not in the middle of it. paused() does not get executed while the timeline is running. Again, my suggestion is to use call() to call a function that evaluates the value of i. https://greensock.com/docs/v3/GSAP/Timeline/call() based on the value of i you can pause the timeline or have it keep playing.
  21. Carl

    Pause timiline

    not exactly. I was thinking you wanted to add the pause when you created the timeline so I would have said if(i){ tl.addPause() } if you want to check to see if a pause is needed while the timeline is running, then I would probably just use call(), but if your way is working, then it should be ok. I'd have to test it myself, which I can't do without a demo.
  22. Carl

    Pause timiline

    Oh and I just remembered I have a blog post showing the most common follow-up question: "How do I pause for a specific amount of time". It's from one of my premium GSAP courses but free below: https://www.snorkl.tv/pause-a-greensock-timeline-for-a-specific-amount-of-time/
  23. Carl

    Pause timiline

    When building the timeline you can test to see if i is true and then use addPause() if yes. See the docs for addPause()
  24. thanks for posting the video, Craig. I actually needed a refresher myself.