Jump to content

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

Carl last won the day on January 3

Carl had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Carl last won the day on January 3

Carl had the most liked content!

Community Reputation

9,903 Superhero

About Carl

  • Rank

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. that opens the door to a whole bunch of logic issues such as what do you do if some tries to close the panels while they are still opening? In last week's video in B-sides, Bonuses, and Oddities I go over the perils of using 2 timelines for distinct enter and leave animations. See below although this lesson focuses on a simple "rollover" effect the same concepts can be applied to your click-driven animation. other approaches involve creating animations on demand (by calling functions which create those animations) but there are some pros and cons that I
  2. Hi Stefano, Glad you are enjoying the courses. Thanks for providing such a clear and reduced demo. There are a few ways to do this but I will start with a fairly basic approach to see if that works for you. To chain these 2 timelines together you can add them both to another timeline, often called a master or parent. GSAP 3 Beyond the Basics has some lessons on this. https://codepen.io/snorkltv/pen/abpaPEJ?editors=1010 notice your child timelines are no longer paused and they are added to master. your button now controls m
  3. Hi @limbo After pondering this thread I figured it was worthwhile to explain why 2 timelines doesn't work so well and also show a "single timeline" solution. I made a video that premieres pretty much now... Here are some demos Simple https://codepen.io/snorkltv/pen/MWJVWwy More Complex https://codepen.io/snorkltv/pen/12598b629fa6d41468fdc8e60ee896ba Multiple https://codepen.io/snorkltv/pen/MWJVYeQ?editors=0010 Enjoy!
  4. nice job, @mikel it's cool how different animations trigger from different directions.
  5. in the past I've done things where on mouseleave I check the progress() of the mouseenter animation. If it isn't complete (progress() <1) i just reverse() the enter animation. then you get into the situation where you have to decide what do you do if the mouseleave animation is playing and they quickly do a mouseenter? More conditional logic? (see mega mess below) for me, I've found its often much more trouble than it's worth to get 2 distinct, pre-created, over/out animations to play nice. another approach is that you create animations on demand; each time you ent
  6. thanks for the clear demo. firing different animations on mouseenter / mouseleave can cause some interesting logic issues and un-desirable results if not planned properly. things get can "jumpy" if you enter and leave quickly making the leave animation fire before the enter animation is finished. in this simplistic animation its not much of an issue as the animations are pretty quick. in your demo the solution is just to use restart() instead of play() on each event. When an animation's playhead gets to the end of the animation calling play() again does not pl
  7. Thanks for the demo. It clearly demonstrates the issue. I don't have an answer for you other than "maybe css vars are handled differently"... which isn't helpful. 😁. I'm sure @GreenSock will be able to give you a straight answer. Hopefully you can wait until tier 1 support resumes on Monday. Rest assured your issue will be addressed properly.
  8. Hi and welcome to the GreenSock forums, Thanks for providing the demo. Your carousel is pretty cool. Unfortunately it isn't set up in a way that makes it easy for ScrollTrigger to control it. The only way to change slides is to click a button. ScrollTrigger typically controls a timeline's progress as you scroll. You don't have a timeline. You have 3 buttons doing specific animation actions. I see some options for you Option 1: recreate your carousel so that all animations are in a single timeline and hook it up to a ScrollTrigger
  9. Hi and welcome to the GreenSock forums, I can't tell from the image you provided what is wrong. Are you getting an error? Do you have any gsap code that references CustomEase? Have you created a CustomEase? I think watching the videos will help considerably. Please watch the Getting Started Video. Happy to help if you can provide a question that clearly explains what trouble you are having.
  10. Hi and welcome to the GreenSock forums. So glad you provided a demo with most of it working. Saved me loads of time! The trick here is that we are not going to add the stars scene1() animation to the main timeline. We are going to add a tween that does a tweenTo() on the stars animation for 5 seconds (or any time you want). Note that scene1() now just returns a timeline. I added GSDevTools so that you can see that the main timeline has a finite duration https://codepen.io/snorkltv/pen/JjErJvP?editors=0010 This video explains
  11. Sorry when you said you only wanted to increase the size of the div I thought that is all you had trouble with. if you want the line to grow as the orange panel scales you would then need a timeline with 2 tweens (1 for scale of panel, 1 for line). You would then attach a ScrollTrigger to the timeline https://codepen.io/snorkltv/pen/oNBGzOE?editors=0010 If you aren't familiar with building timelines please check my free GreenSock course GSAP 3 Express. It will help a lot.
  12. There is a little twist to this. When doing ScrollTrigger animations it's important that you don't animate the trigger. The trigger's size and position is critical for calculating when scroll-driven animations begin and end. If you resize the trigger then ScrollTrigger could get a little wonky. In the example below only the orange panel changes size as requested. You will note I wrapped the orange panel in an .orangeWrapper which I use for the trigger. https://codepen.io/snorkltv/pen/oNBGzOE?editors=1000
  13. the reason the master timeline appeared not to be repeating is because each child timeline had pause(2) in it. that just pauses the timeline at a time of 2 seconds https://greensock.com/docs/v3/GSAP/Timeline/addPause() if you want some dead time between tweens in a timeline, use the position parameter. I made this fork and removed some tweens just so you can see each timeline playing in succession. feel free to edit those timelines to do whatever you like with the timing and property changes. https://codepen.io/snorkltv/pen/JjEyPMx?editors=1010 a
  14. it looks like your function changeColors() is returning itself function changeColors(i) { var circle = "#circle" +i; var txt = "#txt" +i +" > path"; var change = new gsap.timeline(); change.to(circle, 1, {fill:"#01ac4e"}) .to(txt, 0.5, {fill:"white"},">") .addPause(2) .to(circle, 0, {fill:""}) .to(txt, 0, {fill:""}); return changeColors(); // should be return change } You probably want it to return the change timeline
  15. this demo by @OSUblake may help with some of it. https://codepen.io/osublake/pen/XJQKVX it looks like you would have to add code that leaves the original in place. this pen by @Rodrigo shows how to make copies of the thing you are dragging, maybe it will help as well. Drag the numbered blue divs around. https://codepen.io/rhernando/pen/mJqwZq