amitr95

I fear I'm making a very simply mistake here, but I'm trying to use the horizontalLoop() helper function to create two marquees that go opposite directions. From the demo, there are two issues: If there's not enough logos present in the view width, it creates blank spaces until it jumps back to "slide 1". The loop should be indefinite, like it is in the demo below. You can also see that the 1st and last cards in each marquee are joined together https://codepen.io/mikeK/pen/abmPjxz I've used the verticalLoop() helper before and didn't encounter the above issues, so I'm unsure if I need to do anything further or there's an issue in my implementation?

@Rodrigo - I think part of my problem is that I never know what these animations / effects are called. E.g. I would never have searched for "split screen pinning" to find demos for those 😅 Nevertheless, I can confirm I have managed to create the effects I was after using the assets shared in this thread. Many thanks all

Ah, I see. Thanks for the demo, I've been trying to find something like this in the forums and on CodePen, but couldn't find anything similar. Is there an easier way to find these things or was a demo that was freshly created? Nevertheless, thanks again for the demo. I'll try emulate for my use case and will post my solution back here in case it helps anyone else.

I've expanded on the above and created this new version where I've attempted three things: clip-path revealing images yPercent reveal image (to emulate the clip-path effect) Background colour change effect See V2 version here: https://codepen.io/Amit-Rai-the-styleful/pen/jORzBpz In the above demo: The images are stacked on top of each other so that on scroll I can reveal the next image from the bottom up (as per the example on this site). To make sure that the image are stacked in order, I've done gsap.set(photo, { zIndex: allPhotos.length - index });. However, the issue with this is that neither my clip-path or yPercent animations are revealing the next image because of it. I also can't update zIndex in animation because it'll just blink into visual and you can't z-indexing part of an element. I've implemented the background color methodology as per the above demo (altered slightly for my use case of course). However, the issue issues I described above still remain where 1. when the user scrolls into the pin section (the first image and text section), the background colour isn't changing, it looks like it only begins when the second image is in view (1st sections bg colour is being applied when 2nd image is in view). 2. There still seems to be an issue where when the BG colours are changing, it because transparent and then changes to the next colour. I want it to transition from colour A to B (currently looks like it's going from A to transparent to B). Any pointers?

Thanks for the links @Rodrigo. Will explore the clip-path approach. In regards to the background colour change, does that imply that my current method was incorrect? I thought it's close as the colours do change, but with glitchy behaviour. Keen to understand if the approach itself was incorrect usage / application for future reference.

Apologies for the late response @GreenSock. You're correct with the assumptions and I can confirm your demo is the working version I was trying to achieve To expand upon the demo, I'm trying to achieve 2 further things: If you navigate to this website and scroll down on the homepage, you will encounter a similar pinned module. If you look at the image change effect, it gives the effect of the image being "revealed" rather than sliding in from the bottom to top (as my demo is doing). Upon inspecting the functionality present on that site, it looks like they're changing the background-image position as a user scrolls. In my scenario, I have images which are positioned beneath the "active" one. As such, I know part of the solution to emulate this functionality is to remove gsap.set(photos, { yPercent: 100 }); so that the cards stack on each other. Would the next step then be a clip-path animation, so that it gives the effect that the image is being cut, revealing the one below it? If so, could you share any demos that showcase how this is achieved? I couldn't find any in the CodePen libraries or anything similar in the forums. Secondly, again using the above website as an example, I'm also trying to change background colours on each pinned item. The issue I'm having is that 1. it doesn't apply the BG colour for my first pinned element on scroll. 2. When transitioning from one section to another, there's points where it doesn't transition between the two colours. Initially I thought it's a margin issue, but it doesn't seem like it. Can you point me in the right direction? Thanks https://codepen.io/Amit-Rai-the-styleful/pen/ExJmrGq

Hello, I've been trying to reverse engineer this demo from @Carl: https://codepen.io/snorkltv/full/vYVBPJq But with more reusable class names / suited to my use case. The issue I'm having is with the images, it does not change as you scroll down. Upon inspecting, I can see that it adds the following to my first .splitScreenPinning__image: opacity: 0; visibility: hidden; The above, however, is not added in the above demo. I can see that Carl's demo is using GSAP V3 and I assume the autoAlpha property has been reworked since, which is causing this issue? Unless I'm missing something in the SCSS, animation is where the issue is stemming from?

Hey @mvaneijgen, Apologies for the late response. But! I can confirm stripping it back did allow me to focus in on problem areas and I managed to solve it via this approach Appreciate the demo you've linked also. I like the perspective effect! One to keep in mind for future builds. Many thanks for the assist.

Hello, Returning to the world of GSAP after a few months off. I'm trying to explore a block where cards are stacked upon each other, and the content related to that card changes at the same speed as the card enters and exits. For example, when card 2 is sliding in, make card 1 content slowly fade out and card 2 content fade in and slide in at the same speed as the card is. In my demo, you can see it somewhat in effect, though my content is overlapping each other from cards 2 onwards and it's not quite matching the speed of my cardChangeTL. Where is my logic falling apart? Any guidance would be appreciated. Thanks!

I have an animation where paths in SVGs are changing alongside content, as a user scrolls. The issue I'm having is that my SVG animation (fill) is happening faster than my opacity animation. What this does is it shows the fill, but my content opacity remains at 0 until a user scrolls more down (giving it an active effect, but not showing the content). See image here for context. I've tried to play around with duration (i.e. opacity: 1, duration: 0.5), but no luck. There's also instances where my SVG path doesn't have the desired fill (has a white, inactive fill) alongside text. See image here for context. When an SVG shape (.onion__shape-x) changes, I'm trying to make it so that the current orange fill (#f15a40) fade out gradually as the user scrolls, and it applies to the shape it is scrolling towards. I've ordered the fromTo accordingly, but it doesn't seem to work either.

Hi @Rodrigo, Apologies for the late response, was AFK for a while. Nevertheless, happy to say I've made progress regarding the scaling aspect of my query. However, I still can't get the next card from the pinned card to come from off screen (the next card is always touching the bottom of the top card). Any insight on how I can achieve this in my use case? Your demo link isn't showing anything for me on scroll? See my latest demo here: https://codepen.io/amit_rai95/pen/qBQqMYx

I feel like close with this one, but cannot get two items to work in my demo: I want the next card to appear from off screen. At the moment, card 2 is visible at the bottom of card 1 When scrolling up, I want the card that is slowly hiding, to scale down The effect I'm trying to emulate can be seen on this website: https://swagapp.com/ See video here: https://i.imgur.com/Rnthq26.mp4 I thought the cards were touching because of the start and end triggers, but playing with those yielded the same results. Any advice?

Many thanks @GreenSock & @mvaneijgen, can see where my logic needed tweaking based on the latest demo above and my last codepen. Thanks

Hi @mvaneijgen, Thanks for the advice, managed to get the line animation working without ScrollTrigger. With the animation working as expected without ScrollTrigger, I've now tried to re-introduce it and play the animation. However, with ScrollTrigger now in place, the animation because quite glitchy. Why is this? Line 25 in my demo can be uncommented to see the animation working smoothly. https://codepen.io/amit_rai95/pen/poQybgJ

I have a line .section__line which I'm trying to draw in on scroll (and reverse when scrolling back up). However, my current implementation doesn't draw anything. I'm trying to get it to work by animating the lines height on scroll. Am I missing something obvious? I've also tried: onEnter: () => { const scrollProgress = (window.scrollY - line.getBoundingClientRect().top + window.innerHeight * 0.2) / line.clientHeight; const progress = Math.max(0, Math.min(scrollProgress, 1)); gsap.to(line, { height: `${progress * 100}%`, duration: 0.5 }); }, onLeaveBack: () => { gsap.to(line, { height: 0, duration: 0.5 }); }, });