Jump to content
GreenSock

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

akapowl last won the day on September 25

akapowl had the most liked content!

akapowl

Moderators
  • Content Count

    217
  • Joined

  • Last visited

  • Days Won

    11

akapowl last won the day on September 25

akapowl had the most liked content!

Community Reputation

476 Leader

About akapowl

  • Rank
    Advanced Member

Recent Profile Visitors

696 profile views
  1. Hey @ToxifiedM - welcome to the forums. In your case, ScrollTrigger is not working, because you also have to define ".root" as its scroller. ... scrollTrigger: { scrub: true, scroller: ".root" } ... https://codepen.io/akapowl/pen/QWNoXLM
  2. akapowl

    GSAP Looped Animations

    You're thinking of it just right, when saying it's a sequence within a sequence. I think for that, you'd have to work with the concept of sub-timelines. For each element create a timeline of its own and add that timeline with a specific delay/offset for each box to a larger timeline, that you can repeat inifinitely. https://codepen.io/akapowl/pen/ZEWPQXW
  3. akapowl

    GSAP Looped Animations

    @Nine Something like this? https://codepen.io/akapowl/pen/WNwmrQm
  4. akapowl

    GSAP Looped Animations

    @ZachSaucier Since I see you in here atm, the tween in the example has the duration applied twice (once per old and once per new syntax) - might be leading to misunderstandings.
  5. akapowl

    GSAP Looped Animations

    Hey @Nine Maybe this example of staggers on codepen can get you going into the right direction https://codepen.io/GreenSock/pen/HxzEl If you want to repeat the animation infinitely after all pieces have animated, you could add a 'repeat: -1' to the tween.
  6. Sorry for crashing the thread, but I gave it a shot myself. As @ZachSaucier already mentioned, it mainly is a matter of positioning the sections and applying pinning ScrollTriggers accordingly. Note, that this is not an ideal solution - it works on full-screen for me, but doesn't work well with smaller window sizes for example. Edit: Actually it does work as expected on smaller window-sizes, too - just not when resizing. So you'd have to add in all the resize logic. Just maybe see this as some sort of inspiration. https://codepen.io/akapowl/pen/WNwPLBr
  7. Hey @CommonUser That is because you have to define a scroller for each of your ScrollTriggers, when working in a setup as such. I added scroller: "#my-scrollbar", to your ScrollTriggers, and also changed your scrollerProxy to ScrollTrigger.scrollerProxy("#my-scrollbar", { ... and now it works. https://codepen.io/akapowl/pen/PoNLove
  8. Hey @Narendra Verma That is because your ScrollTriggers are overlapping with tweens on the same elements. Both your ScrollTriggers, although they start at different points, end at the same point - thus you are creating conflicting tweens.
  9. Hey @arjen I doubt, that this is related to the pin-spacing. It is just because of the natural pin behaviour. It will become more clear if you look at this pen: https://codepen.io/akapowl/pen/bGpZGga You pin the teal element when its top hits the center of the screen. And that is exactly what is happening. Only you won't notice it being pinned, because a) in your setup, on larger window sizes, the trigger of the pinning will already be past the startpoint - so it will always appear in that position and b) you have no visual feedback to actually see, when the pinning happens, such as the different background-color in my example here.
  10. Well, you could also stick to your original start and end for the ScrollTriggers and just translate your card__inner up on the y-axis half the amount of its height, so in your case '-35vh'. I don't know if that is a perfect solution, but in your case it gives the desired result. https://codepen.io/akapowl/pen/RwavEay
  11. Hey @arjen - welcome to the forums. I think, it does, what you tell it to. It pins your item to when its top meets the center of the window. If you change the start to start: "50% 50%", you would pin it to when its center meets the center of the window, which is probably what you aim at. You would just have to adjust the right side of your setup accordingly if you also want it to be centered on snap. https://codepen.io/akapowl/pen/KKzJXVm Edit: My pen above creates gaps between the individual ScrollTriggers, because I forgot to also change the end accordingly: end: "bottom+=50% 50%", This should be better https://codepen.io/akapowl/pen/dyMaVgy
  12. Hey @Daniel Hult You are making one of the most common ScrollTrigger mistakes here: Nesting ScrollTriggers inside multiple timeline tweens A very common mistake is applying ScrollTrigger to a bunch of tweens inside a timeline. This doesn’t make much sense because both the timeline and the ScrollTrigger would try to control the tweens' playhead. It's best to apply a ScrollTrigger to either a standalone tween or to a parent timeline. You could do what you tried above by just having 1 ScrollTrigger and adjusting the durations and offsets of the single tweens in that timeline accordingly. https://codepen.io/akapowl/pen/KKzJqyJ Also note, that I changed your color-names to hex-values, just as Richard1604 mentioned above
  13. Just to confirm, this indeed looks like what I was experiencing / talking about in this thread ...but for me it only appeared in combination with codepen.io and Opera. When openening the same setup from a local folder, even in Opera it was all buttery smooth with 3.5.1 (Reverting to 3.4.2 also did the trick for me on codepen, back then.) Edit: Just now, I notice the same behaviour as back then, on the ScrollTrigger demo-pen above: In the preview-frame in this window here, it works as its supposed to, as soon as opened on codepen.io, it lags as it does in the video.
  14. Mimicing the natural scroll-speed, as you intend, can probably be done, but I think it might be a bit more complicated, than you thought. (And I also really hope, I am not overcomplicating things, where there actually might be an easy solution) Let me start with this: Lets say you have a container and within that container you have a wrapper with lots of content in it. You set a ScrollTrigger with a pin for that container - starting when it hits the top and the end to += the height of (all the content within) that wrapper. If you apply a scrub with only a single tween, that translates the wrapper upwards on the y-axis for that same amount as the height, you will get that effect, that basically just mimics the natural scrolling behaviour - in a way, similar to what you tried and had in mind. An example of this can be seen in this thread, where I incidentally created such behaviour - see my last two answers in that thread: The problem in your actual case now is, that you have a timeline with multiple tweens, on multiple elements with different heights, so you'd have to 'sync' up the duration of each element, for which it is important to appear like naturally scrolling, with the total duration of your scrubbing ScrollTrigger. ( Hope this is at least a bit understandable to you, I don't know how else to say it. ) So first we need to get the height of all important elements, which in your case is 2 times the height of the .pinned-text ( because you tween on the scale twice and it probably should mimic the natural scroll-speed in both cases) + the height of your .image-wipe--two. var relevantElementsHeight = pinnedTextHeight*2 + imageTwoHeight; To that relevantElementsHeight I add 10% of that height 5 times ( 3 times for the offsets you have on some tweens and 2 times for the tweens on opacity, for which it is not that important, that they have a duration that mimics the natural scroll flow). I chose the 10%, so I could set the duration on the opacity-tweens and the offset on the other tweens to 0.1 (so 10% of the scrubbing-distance for each one) var totalPinDuration = relevantElementsHeight + ((relevantElementsHeight*0.1)*5); That makes the totalPinDuration that I set to the 'end' of your ScrollTrigger then end: () => "+=" + totalPinDuration, To get the neccessary duration for the relevant tweens in relation to the scrubbing, I then devided the height of the single elements to be tweened on, by the relevantElementsHeight var pinnedTextDuration = pinnedTextHeight/relevantElementsHeight; var imageTwoDuration = imageTwoHeight/relevantElementsHeight; so I could set up the timeline like this in the end tl .from(".pinned-text", { duration: pinnedTextDuration, scaleY:0, transformOrigin:("bottom center")},"+=0.1") .to(".pinned-text p", { duration: 0.1, opacity:1 }) .from(".image-wipe--two", { duration: imageTwoDuration, yPercent: 100 },"+=0.1") .to(".pinned-text p", { duration: 0.1, opacity:0 }) .to(".pinned-text", { duration: pinnedTextDuration, scaleY:0, transformOrigin:("bottom center") },"+=0.1") ; This was a pretty wild ride, but it seems to be working pretty consistent for every window-width. Just note, that it is by no means responsive to resizes yet - I just had no more time rewriting it to work with resizes. https://codepen.io/akapowl/pen/gOrZoWJ Just thought, it was something interesting to tackle, after I noticed, that it would probably not be that easy to achieve. I wouldn't bet on me not having overseen anything obvious on this, though - maybe even a way easier approach. Edit: It would be great, if you could leave that original pen of yours in its original state and fork it for yourself, when you want to try out any changes on it. This way you could give others in the future the chance to better retrace what has been discussed in this thread
  15. Well those '+=1000%' just basically sets its end to 10* the container-height (10*100%). But you are right, making the end dependent on the container height itself solely, would give varying results on different screen-sizes. And since those 1000% are just 10 times the container height, that would be still the case here - was totally overseeing that, sorry. That is less because of the scrub, but more because of the pin and ScrollTrigger applying that nifty pin-spacer . Your container will stay pinned for whatever amount of scrolling-distance you tell it to, so yeah, I think, you can vary on that to your liking.
×