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. good job incorporating what I had provided. to make the line go directly back to it's start position we need to pause the timeline that is controlling it (called tween). we then create a new tween to animate the line to y:0. when we hover again the original tween needs to restart() code commented below: https://codepen.io/snorkltv/pen/LYezyZZ?editors=1010 oddly enough I had created a lesson using this exact technique just a few week ago (hover the "book now") button https://codepen.io/snorkltv/pen/VwrrNMy
  2. Here's a slight modification. I changed my tween to a timeline so that I can tap into tweenTo(0) on hover off. The cool thing about this is that if you mouseleave BEFORE the first iteration ends when the ball drops down, the animation will appear to reverse. If you mouseleave when the ball is moving back to the start position it will just continue to the start position. I think I found a new lesson for my students. thanks! https://codepen.io/snorkltv/pen/VwyMjWG?editors=0010
  3. hi @cptain Here is a demo from my lesson Constant Loop with Return to Start in GSAP B-sides, Bonuses, and Oddities https://codepen.io/snorkltv/pen/ExwVxvq?editors=0010 The basic idea is that on each repeat a callback checks to see if the user is still hovering. This is different then reversing immediately on mouseleave but maybe it's a suitable option to consider.
  4. Hi and welcome to the forums, For something like this I think the trick is to NOT think of them as individual bars but more like stacked full screen elements that just animate left at different rates. You don't control the width of anything, just the x value. https://codepen.io/snorkltv/pen/mdpMwWY?editors=1010 In this example I'm doing a stagger on the top image and 3 colored full screen divs underneath it. You can get drastically different results by changing duration of animation ease of animation stagger: each stagger: ease I set up GSDevTools for you so you can scrub through and explore the timing. If you are just starting out, you can take my complete GSAP beginner's course for free it has videos on staggers and the advanced stagger properties used in this demo.
  5. Wow @mvaneijgen and @Trapti thanks so much for the kind recommendations. What's better yet is to see you actively helping others around here. So good!
  6. (animation is paused to show that boxes are not aligned while autoscrolling) this is what I'm seeing. I'm guessing your scroll eventlisteners are firing at a totally different rate than Draggable's onUpdate. I doubt this is a Draggable issue as Draggable is doing exactly what it should in autoscrolling the parent of the thing you are dragging.
  7. in this demo it continues from the current rotation value (not beginning) https://codepen.io/snorkltv/pen/LYeLdGg if you still need help please provide a demo that clearly shows the issue. perhaps I'm misunderstanding.
  8. try tween.invalidate().restart() sneaky @pointC jumps in but here are the docs in case you want to learn more https://greensock.com/docs/v3/GSAP/Tween/invalidate()
  9. the reason Flip (first, last, invert, play) is so powerful is that it requires that you provide the first and last states. All greensock animations are based on a known start and end state. You are doing something very different than what Flip was designed for. I suspect you will need to use an onUpdate that constantly calls a quickSetter() where you pass in new values that you calculate OR create new tweens constantly (not great for performance but may work). Check out the demo in the quickSetter docs as a starting point. It could get really tricky though if you need to calculate positions that are affected by margins or nesting. You may need to reach for getRelativePosition. Definitely not a small undertaking. Lastly, i guess you could repeatedly create new flip states on an onUpdate on the elementB tween but that doesn't seem very efficient.
  10. based on the info provided I would start by: place your number holder in a fixed spot like 200px from top of the page create a ScrollTrigger for each circle set each ScrollTrigger to have a start:"top 200px" give each ScrolTrigger an onEnter callback that increments a number. start with just a console.log(count++) or similar Try to get this working in a minimal demo. Don't focus on the design at all. Just some colored divs that move up and down the page when you scroll is a good place to start. If you get stuck, just post your demo here and I'll take a look.
  11. This was kind of fun to make and borrows from some technique's I've seen @GreenSock discuss. It will most likely be a video lesson in ScrollTrigger Express very soon https://codepen.io/snorkltv/pen/eYyBooE?editors=0110
  12. Hi and welcome to the forums, It's always best to provide a minimal demo as it helps us better understand your html and css setup (very important) and offer solutions more tailored to what you're working on. That said, you don't want to have ScrollTrigger's on tweens in a timeline (ScrollTrigger Common Mistakes) What you seem to be describing has been addressed here before, but I'll have to find a demo or create one. In the meantime I'd suggest creating a ScrollTrigger for each section (date). Use its onToggle to determine its active state and then fade your dates in the list accordingly. onToggle from ScrollTrigger docs Function - A callback for when the ScrollTrigger toggles from inactive to active or the other way around. This is typically when the scroll position moves past the "start" or "end" in either direction, but if it shoots past BOTH on the same tick, like if the user scrolls extremely fast, onToggle won't fire because the state hasn't changed. You can often use this one callback in the place of onEnter, onLeave, onEnterBack, and onLeaveBack by just checking the isActive property for toggling things. It receives one parameter - the ScrollTrigger instance itself which has properties/methods like progress, direction, isActive, and getVelocity()
  13. hmm, in your latest demo it appears the issue is that you are jumping to the section 5 it works fine but then snapping kicks in and moves the page down. to test this i removed the snapping and things appeared to work fine. @GreenSock may have a better idea why that is. it also seems that you want to dynamically change the scrub value. you want it false when jumping to a section but 1.5 when someone is scrubbing. I don't think the api allows that.
  14. @mikel your solution is very nice for having little code, however it seems the scroll bar doesn't move with the jump links. If you click button 6 the animation updates but the scrollbar is still at the top of the window. Not sure what you mean. You can have scrub set to true as it appears in my demo above. If you want to animate the scroll position you would use a to() tween. Your initial post said "I don't want to see other sections go by" which is why I used a set(). It seems your demo is acting weird because you are using a set() with a duration. When I made it a to() tween it seemed to work fine all the time. bad: gsap.set(window, {scrollTo: position, duration: 1, ease: "power0.linear"}); good gsap.to(window, {scrollTo: position, duration: 1, ease: "power0.linear"}); hope this works the way you like: https://codepen.io/snorkltv/pen/KKZgdQP?editors=1010
  15. hmm, I'd strongly recommend setting the to values explicitly like tl.fromTo(close, { duration: 1, scale: 0.5, opacity: 0 }, { scale:1, opacity:1, clearProps: "scale,opacity" } ); your code may do what you think it should now, but it's going to be very hard to troubleshoot down the road. just a suggestion
  16. thanks for the demo. One way to avoid this altogether is to use fromTo() tweens instead which will set the start and ending property values. to clear the inline styles use clearProps gsap.set([popup, close], { clearProps: "all" }); https://codepen.io/snorkltv/pen/BaJjdZZ?editors=0010
  17. perhaps this demo from @Rodrigo can help. click numbers to drag clones https://codepen.io/rhernando/pen/mJqwZq?editors=0010
  18. Sure, you could put an ease on any animation. However, when you have scrub:true you are basically giving the user the control over the rate of change because they can scroll as fast or slow as they want. Try putting a "bounce" or a "power4" ease on your animation as a quick test. I'm guessing the solution @mikel provided is what you were trying to achieve.
  19. Thanks for the clean demo. Very helpful! Great job converting the label to a scroll position too! Since you already did the hard work I was able to tap into the ScrollTo Plugin using a set() to automatically jump to the position gsap.set(window, {scrollTo:position}) https://codepen.io/snorkltv/pen/PoEPxwM?editors=1011 It's important to note that in order for this to work well I had to change your scrub value from 1.2 to true. When scrub was set to 1.2 it means the scroll position would need to "catch up" to where it was set, thus resulting in a little animation. Change it around to see what I mean. Also I loaded ScrollTo and the other plugins using the JS settings tab (click the gear across from the JS tab) You might appreciate the Free lesson I just released on using ScrollTo with ScrollTrigger. It seems you know quite a bit but it may show you another cool trick using the start and end values of a ScrollTrigger https://www.creativecodingclub.com/pages/free-lesson-scrollto-scrolltrigger
  20. Hey @mikel Great animation! Love the schnoz droop. You do an AMAZING job helping tons of folks around here!
  21. Hi and thanks for providing the demo! There's probably a few ways to achieve this but what I did: modified the logo css to reflect where I want the animation to end: small, centered, with position fixed added an animation to the ScrollTrigger that animates from the big and centered values set the scrub value to true and removed the toggleActions. https://codepen.io/snorkltv/pen/gOoaoYL Hopefully this gets you in the right direction! If you want loads of ScrollTrigger tips and tricks, here's a shameless plug for my course ScrollTrigger Express
  22. Welcome to the forums! I'd suggest making your timeline outside the function and then toggle it's reversed() state on open and close. This Quick Tip which shows how to toggle the paused() state can be altered to use reversed() WIth your setup you are making a new timeline each time and the BIG problem is this from tween media_tl.from(overlay, {duration: 0.5, y: 30, autoAlpha: 0}); If you already closed the animation and the autoAlpha gets set to 0 the next time you animate FROM autoAlpha:0 nothing will happen as it is already 0. In other words, animating something from 0 to 0 won't allow for any change in value. But as @mvaneijgen suggested, a minimal demo would make it much easier for us to provide a clear solution.
  23. thanks for the updates @FlashV8 and @lwmirkk it's interesting to hear that AS3 still has some life in it. It's been sooo long since I've touched it. I certainly miss the convenience of swf files that could be played virtually anywhere.
  24. nice work @mvaneijgen The reason the rotation would continue is because the timelines that were playing when you clicked the buttons again were still playing. In other words there were multiple concurrent timelines affecting the same boxes. I went ahead and created global references to the timelines when they are created child1, child2 and then I kill() them before assigning the new animations to them https://codepen.io/snorkltv/pen/ZEvEQjB?editors=0010 Thanks so much for helping out around here! @gloria-dee this seems to work, but frankly I would do my best to avoid situations like this. I would reserve master timelines with nested timelines solely for situations where you have a long linear navigation where you desire global play, pause, reverse, or scrub controls. Once you start needing independent control of child timelines or tweens it can get pretty messy as you are basically expecting timelines to do things that kind of break the logic of what they were intended to do. Child timelines render based on where they are relative to the parent timeline's playhead position. As the parent's playhead advances the child timeline's playhead stays locked in place with the parent's so that everything renders as it should at the right time. Imagine a timeline has a child tween that starts at a time of 1 and is 2 seconds long, making it end at timeline.time(3) [--parent timeline --] ----- 1 ----- 2 ----- 3 ----- <child tween > Both timeline and child tween end at time(3) When the parent timeline is at a time(3) it knows the child tween should render at its end time(2) If you monkey with the child tween and try to restart() it you set its playhead back to a time(0) which is at the parent's time(1)... but the parent's playhead hasn't moved. The parent can only render child animations based on where it's own playhead is. Once you start trying to control child timelines and tweens independently you get into a situation where you need to understand smoothChildTiming which keeps the playheads all aligned by moving the child aniamation's startTime(). It is admittedly quite a bit to wrap one's head around. Don't feel bad if you don't understand it. My explanation above could probably use some work.
  25. I think this is confusing us as blake's demo shows it's kind of weird to have text going down when you are expecting things to scroll up. maybe you meant something like this? https://codepen.io/snorkltv/pen/mdqNoqX?editors=1010 feel free to elaborate if you need something else