Jump to content

Carl last won the day on December 31 2022

Carl had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Carl

  1. thanks @OSUblake I didn't have much luck with refreshInit I found it odd that it was common that refreshInit and refresh both fired twice when instantiating a single ScrollTrigger. I thought it was just CodePen editor but I'm seeing it in debug mode too https://codepen.io/snorkltv/pen/PoEQEMw?editors=1010
  2. Also for the mods: in this case is there any advantage or disadvantage to using batch over just looping through the lines and creating a load of ScrollTriggers?
  3. Hi @Patte welcome to the forums, Thanks for the demo. This ended up being an interesting challenge for me that I could not easily solve. A few things to consider With text split into lines it is going to need to be split differently for various screen widths. If we use batch() the number of items to be animated is going to change as the screen width changes Text that is split is going to need to be reverted and resplit every time a resize occurs ScrollTriggers are going to need to be completely cleared out or rebuilt every time a resize occurs I thought the solution would lie in tapping into onRefresh. However onRefresh happens on initial creation of the ScrollTrigger so I got into an endless loop of reverting text, re-splitting it and creating a new ScrollTrigger that did the same stuff again... So I basically failed at my first attempt to figure this out. What I ended up doing was creating my own debounced resize event (only fires when resizing is finished, not while it occurs) called killAll() which does the following: reverts all the text kills all the ScrollTriggers created from the batch() calls the init() function which starts everything over again https://codepen.io/snorkltv/pen/wvpmaez?editors=1111 it seems to hold up reasonably well in my limited tests. Would definitely be interested to see if anyone or team @GreenSock members have a better solution
  4. if you want a ScrollTrigger to end when another trigger reaches a certain point you can specify another element as the endTrigger https://greensock.com/docs/v3/Plugins/ScrollTrigger
  5. I saw 2 potential problems. Your section in question appears to be the last on the page. This means there is a good chance the top will never reach the top of the window. You have trigger set to "top top". You also seem to want to change the trigger element to position fixed. that seems like a logic problem as a fixed element will never leave the viewport. in the modified demo below you can scroll to the bottom and you will see the background color turn red which verifies that the stick class is being applied. I set the start to "top bottom" so that we could be somewhat sure that section reached the trigger point. https://codepen.io/snorkltv/pen/vYpdOWL?editors=0010 in the future please take the time to minimize your demo and remove extra js, css and html. it was difficult to hunt down where everything was.
  6. Thanks for the demo. With demos it's always good to minimize them as much as possible so that they only show the issue. I had a difficult time understanding what you were describing. I didn't notice any lines animating. perhaps you meant a "a line of text"? but I didn't see anything wrong with the text either. However, the thing with a class of ".talent" appears to be the image of the person on the right? I think the issue you are describing is that the filter seems to flash. In this case it is necessary to have a starting filter value in the css. I added brightness(1) so that the animation would have a defined end state. Does this look better? https://codepen.io/snorkltv/pen/xxppYMb?editors=0110 i took everything out that wasn't related to the .talent tween as it didn't seem necessary to replicate the issue. If this isn't the issue, feel free to fork your demo with only the animation that needs work.
  7. yes, add a callback at the same time as your label using call() that callback can take an array of parameters that you can use to update your nav. assuming your nav elements are in an array... // insert your updateNav function call at the "label3" label and pass in index value of 3 tl.call(updateNav, [3], "label3"); next you just have to have your updateNav() function activate the nav element with an index of 3 and de-activate the others. function updateNav(index) { navItems[index] // ...do stuff }
  8. 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
  9. 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
  10. 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.
  11. 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.
  12. 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!
  13. (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.
  14. 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.
  15. 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()
  16. 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.
  17. 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.
  18. 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
  19. 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()
  20. 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.
  21. @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
  22. 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
  23. 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
  24. perhaps this demo from @Rodrigo can help. click numbers to drag clones https://codepen.io/rhernando/pen/mJqwZq?editors=0010
  25. 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.