Jump to content

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

Steve Giorgi

  • Content Count

  • Joined

  • Last visited

Community Reputation

6 Newbie

About Steve Giorgi

  • Rank
  1. @GreenSock thanks for the information! I'll drop the easing and see what the result looks like. I was really just looking for a way forward. I was having trouble conceptualizing how I was going to even do what I wanted. I just need to somehow determine which circle is growing so that I can group/select the circles that come before and after. I can then shift them over by 50% of the growth of the center circle. Ideally for my goal, as the center circle grows (I may drop it down to one circle, right now the center three and influenced), it would push the smaller circl
  2. Hey Guys, This is a fork of a draggable carousel which I added ScrollTrigger to: I set the center three circles to be scaled upwards, with the center most circle being the largest. I'm trying to transform the outer circles so that they move away from the expanding circles and never overlap (and give the illusion that the expanding circles are pushing the smaller circles out of the way) much like the Netflix effect seen in their movie selection carousel. Just looking for an approach that might work --- I was thinking maybe I could use the sibling
  3. @GreenSock Yes, I very much appreciate the detailed explanation. That makes perfect sense. I'll continue to put my demo together because the dilemma I'm facing is showing a complex story unfold with scrubbing, but having parts of the story such as the text reveals not controlled via scrub. I know I can do this by looking at the ScrollTrigger position/direction and call timelines that are non-scrubbed, but when going in reverse they exhibit strange behavior (not playing at the right times even when setting the position). I was hoping to have a ScrollTrigger or many ScrollTriggers
  4. I wanted to emphasize that I was not crossing ScrollTrigger timelines/tweens. An isolated ScrollTrigger's snapping is causing another ScrollTrigger to also snap into place. The only common thing they share is a child component. I'm trying to build a test case now.
  5. It's very similar to using call() to trigger non-scrubbed animations from your scrubbed timeline to carry out a timed animation, one that you don't want scrubbed, but I have the timelines working parallel to each other. It's very clean and convincing but I'm running into a couple of issues.
  6. Yes, if you didn't have a gap/delay between the reveal/hide tweens then they would definitely scroll right past the text. This use case has to do with scrubbing a separate timeline parallel to a timeline with non-scrubbed animations (animations that you wouldn't want to necessarily be stopped mid-stride such as text reveals). They are scrubbing an animation and text is being revealed. I think I can kill two birds with one stone with this test case; will get it setup soon.
  7. I have timelines nested inside the master timeline but none of them are associated or connected to any other ScrollTriggers. I absolutely understand you have to avoid nesting a ScrollTrigger within a timeline or tween that is controlled by another ScrollTrigger. I have a ScrollTrigger connected to a timeline that is isolated and separate from the master timeline and any timelines associated with the master timeline. Yet, the snapping on this isolated timeline is causing the master timeline to also snap. I suspect it has something to do with the useEffect React hook. I'll check
  8. I will absolutely take the time to replicate this in a test environment if this not expected behavior. I didn't want to spend hours if this is extreme edge case and/or expected behavior: I have a master timeline and several other ScrollTriggers connected to one-off timelines (no timeline shares conflicting ScrollTriggers, I know this is a no-no). When I set snapping on one of those timelines that is not connected to the master, the snapping also controls the master and forces it to tween/ease between labels. I know for a fact the ScrollTriggers are not crossing over via timeline
  9. Yes, I believe you can use a custom hook to detect the scroll direction and/or trigger the timeline with useState from the main ScrollTrigger position; wasn't too sure about the best approach. Using call() to trigger the timelines was a bit messy anyway -- for whatever reason reverse() would trigger at a different time than play() (with position assigned) and at times it would conflict with my main timeline. I combined both of Carl's approaches and can now control multiple detached non-scubbed/scrubbed timelines in parallel by using a dummy container as the trigger. I
  10. @Carl I ended up sending all my timelines up to a parent component and placed them into a master timeline. This works beautifully. I do have one odd scenario -- in my child timelines I was detecting the direction of the scroll so that I could use call() to fire detached timelines (that I do not want scrubbed) in forward and reverse as the user scrubs forwards and backwards through the main timeline. Since my master timeline is now in my parent component, I can no longer signal the detached timelines sitting in my child components with the direction of my scrubbed timeline. Can y
  11. @OSUblake I have not yet. I have been under the gun with several deadlines but I'm definitely going to get around to it. I am very thankful for the help you've provided already. I haven't forgotten!
  12. Well, the answer to this is simple enough. You can create an ref in the parent component and push each timeline into it for use in a master timeline. If anyone runs into this please let me know and I'll boil the code down and post an example.
  13. Rodrigo - Using this method, do you need to pass the timeline/tween up with a different function callback for each component? I know in your example you used the same function for each component "getChildTweens", but won't it be overwritten for each timeline so you'll be left with just the final timeline from your last child component? If not, how do you differentiate between each timline/tween that you pass up to the parent? In my case, I'm passing up timelines, and in your example you're passing up Tweens, so maybe that's the difference since those are triggered as they come t
  14. Awesome, I figured with the amount of React/Vue related questions I'm seeing in the forums that even without the issue being GSAP related there is a need to make GSAP mesh better/easier with these Frameworks. Thank you for providing the demo -- I'm utilizing styled components but I could setup classes on them. It would be less cumbersome than what I'm doing now. In many ways I've been regretting the switch to styled components.
  15. What would be the best way to pass and use scroll direction from ScrollTrigger within React? In vanilia JS it is incredibly simple, we just look at onUpdate: self => updateScrollDirection(self.progress), but in React it's seemingly much more complex. I'm assigning this via a useState but when passing the state into useEffect it does all sorts of crazy stuff to the tween(s). I'm trying to trigger a timeline that is outside of my main scrubbed timeline, forwards and backwards. I did have it working but refactored my code because of other weirdness - if I simply place