Jump to content

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!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by akapowl

  1. Seems that at some point your images are simply just higher in dimension, than your container is, so they overflow and thus hide the content that comes right after that pinned container. Adding an overflow: hidden to your #container seems to have resolved that issue for me. Is that better? https://codepen.io/akapowl/pen/yLOrRdo
  2. Hey @Hargy - welcome to the forums. You would have to set up the splitText inside of that forEach-function you have for your var headSelectors=document.querySelectorAll("section.white"); so the animation only adresses the text in that one section it is supposed to adress each time. I set it up like this // Split Text Triggers var headSelectors = document.querySelectorAll("section.white"); headSelectors.forEach((header, index) => { // Split Text const splitThis = header.querySelector(".slide-content"); const split = new SplitText(splitThis); // Animation var anim = gsap.from( split.chars, { x: "700", y: "40vh", ease: "power2.inOut", stagger: 0.08, // repeat: -1, paused:true } ); console.log("hs " + header.offsetLeft + " index " +index); ScrollTrigger.create({ animation: anim, start: () => header.offsetLeft - 1000, end: () => header.offsetLeft - 200, toggleActions:"play none none reverse", scrub: 1, id:"startheader", markers: true }); }); Note, that I removed the duration from your tween because a) you had it setup twice (once per old and once per new syntax) and b) duration on scrubbing-ScrollTriggers does behave different from duration on regular tweens/timelines - thus it might do something different, than you thought it did. https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub Also on that splitText-ScrollTrigger I changed scrub true to scrub: 1, so it appears more fluently (and not so choppy) in 'sync' with the translation of your horizontal section - which also have a scrub: 1 applied - but that's just a suggestion Is this what you had in mind? https://codepen.io/akapowl/pen/BaKERXz Cheers Paul
  3. 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
  4. 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
  5. akapowl

    GSAP Looped Animations

    @Nine Something like this? https://codepen.io/akapowl/pen/WNwmrQm
  6. 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.
  7. 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.
  8. 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
  9. 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
  10. 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.
  11. 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.
  12. 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
  13. 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
  14. 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
  15. 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.
  16. 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
  17. 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.
  18. Hey @darkgr33n Since you are using a scrub-animation, the perception of its 'speed' depends on the duration of the ScrollTrigger - meaning the time between its start and end. You don't necessarily have to set the end of your ScrollTrigger to the containerRows.offsetHeight - you could vary on that a bit. Just setting the end to '+=1000%' for example, makes the scrubbed animation appear waaaay slower. You should be good to go, simply just adjusting that end to your liking https://codepen.io/akapowl/pen/LYNMjoq Does that help?
  19. Hey @Narendra Verma That could be achieved, by setting up the timeline for the new ScrollTrigger you added in, like this, for example t13 .to(".content", { duration: 1.5, opacity: 0 }) .from(".content-two p", { duration: 1.5, opacity: 0, stagger: 1.5 }) ; https://codepen.io/akapowl/pen/VwaqWdr First, fading out the .content you have, and then fading in all the paragraphs of your .content-two with a stagger. Does that feel, like what you want to achieve? Edit: You actually wouldn't even have to create a new ScrollTrigger for this. You could simply just extend your t12-timeline with the new tweens like this: t12 .from(".one", { duration: 1, opacity: 0 }) .from(".two", { duration: 1.5, opacity: 0 }) .from(".three", { duration: 1.5, opacity: 0 }) .from(".four", { duration: 1.5, opacity: 0 }) .from(".five", { duration: 1.5, opacity: 0 }) .from(".six", { duration: 1.5, opacity: 0 }) .to(".content", { duration: 1.5, opacity: 0 }) .from(".content-two p", { duration: 1.5, opacity: 0, stagger: 1.5 }) ; That does do the same as the first version, just in a slightly different 'duration' than your version, as you can notice on the markers. https://codepen.io/akapowl/pen/eYZbRaz On a sidenote: In your demo your heading is moving all around the place when scrolling. Removing the 'position: sticky', that you added to it, fixed that issue. But maybe this was intended, I don't know. Also I added a 'min-height: 100vh' to your .bg_red, otherwise you'd be having a little white gap below that secction at the bottom of the window on wider screen-sizes. Hope this helps. Cheers Paul
  20. Your timeline runs as expected on codepen.io. https://codepen.io/akapowl/pen/Vwaqwrr So it must be something related to how things are set up on your codesandbox-page. But I know nothing about that.
  21. I tried wrapping my head around this for quite a bit now, and I can't seem to find a problemless solution. The problem I see in your idea in general, is that its aim is to play a regular timeline ( your intro ), that has tweens on elements, that you also want to be tweening on, when scrolling. So, assuming, that your intro timeline was to be reversed, when you scrolled back up to the top, that would create conflicting tweens with your ScrollTrigger setup - e.g. when instantly scrolling back down again. Also, you will notice, that when your page has loaded, and you start scrolling right away, that first set of text you have there, will never be visible. I can only give you a suggestion on the intro-timeline playing on load, but not on the reverse playing when scrolling back up, sorry about that. You could initially set the overflow of your body to hidden and prevent users from scrolling, as long as your intro animation is playing. Then, when your intro-timeline has finished, you can set the overflow back to its initial state. gsap.set(".headline.ih, .logo", {autoAlpha: 0}); document.body.style.overflow = 'hidden'; let intro = gsap.timeline(); intro .to(".headline.ih", { delay: 1, duration: 1, autoAlpha: 1 }, 0) .to(".logo", { delay: 1, autoAlpha: 1 }, 0) .then(function () { document.body.style.overflow = ''; }) This way, you can at least make sure, that all the content is in place, when the user starts scrolling. https://codepen.io/akapowl/pen/LYNXJbJ
  22. Of course, you could also do it like this. That's, what the 'start' and 'end' are for. But you might want to consider getting rid off the pinning, then. In this following demo, your start and end are set to start: "top bottom-=200px", end: "bottom bottom", so the scrub starts when your section's top is 200px above the bottom of the window and ends, when your section's bottom hits the bottom of the window. https://codepen.io/akapowl/pen/vYGQWeR
  23. I don't really know, what you mean? ...you could animate it any way you'd like Do you mean, that you want to add a bit of delay to the whole timeline, so it doesn't start right away, when the second section hits the top? But you would have to scroll down a bit further with nothing but the background to be visible, before the fading in of your elements starts? You could do this, by adding an empty tween at the very start of your timeline, maybe like so t1 .from("body", { duration: 5 }) // EMPTY TWEEN FOR YOUR DELAY .from("h2", {duration: 1,opacity: 0}) .from(".one", {duration: 1,opacity: 0}) .from(".two", {duration: 1.5,opacity: 0}) .from(".three", {duration: 1.5,opacity: 0}) .from(".four", {duration: 1.5,opacity: 0}) .from(".five", {duration: 1.5,opacity: 0}) .from(".six", {duration: 1.5,opacity: 0}); https://codepen.io/akapowl/pen/dyMQVQO Also, I'd suggest, you give this part in the docs a read. https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub Could be helpful to you, since durations do not work quite the same on ScrollTriggers with scrub applied in comparison to durations on regular timelines.
  24. Hey @marc868 Just add a third ScrollTrigger with adjusted values for your third link - and don't forget to also add an ID to respective link in your HTML. Give it a try and see if it fits your needs.
  25. Hey @Narendra Verma I'll rephrase my initial response: The main problem here is, that your ScrollTrigger has its trigger set to '#onscrollAnimatetext' - but nowhere in your HTML do you have an element with the ID of onscrollAnimatetext. It appears to be pinning, but I think that is only because of its 'position: sticky'. I set your trigger to '.onscrollAnimatetext', added a start and end to the ScrollTrigger and it works like a charm. https://codepen.io/akapowl/pen/gOrQaXQ Also, I removed the 'position: sticky' from your .verticalPanel, because I recall reading somewhere, that ScrollTrigger's pinning doesn't get along well with elements that have 'position: sticky' applied - but I am not 100% positive about that and would need confirmation from @GreenSock or @ZachSaucier on that one. (Edit: after doing some digging of my own, I am not sure, this is true at all) Go ahead and adjust the start and endpoint to your liking. Hope this helps. Cheers Paul