Afplaktape

Dankjewel!

I tried following the tutorial on card stacking which was really helpful already but I have some problem getting rid of the white space that is created at the top. What can I do to make the first element be in de place of the dotted line (but pinned)? Thanks in advance:)

Wow at first sight it looked more complicated than that. Thank you very much!

For a project I'm trying to recreate this morph effect where as you scroll down the divider gets curved. I have no idea where to start... Could someone maybe point me in the right direction? 😬 Example: https://remote.madebyburo.com/

Hi Rodrigo, I've added the code provided but it is still adding more space between the images in the middle loop. Is there a way to "center-align" all the loops so that if an image "falls off" on one of the sides, it's not visible on the screen. Is there a different way to create this effect without the use of horizontal loop since I need it for the project? If I comment out the reverse, there is still a different margin between the first and last element of each loop: https://codepen.io/Afplaktape/pen/mdoejVN Thanks in advance!

Thanks for the help so far! I've made some changes and a lot of what I'm trying to achieve is working now. The top and bottom one are behaving the way they should but there is still something going on with the middle one and I can't figure out what the problem is here. 1. Although there are enough images in the loop it still shows a open space on the left. 2. The margin between the images is not equal and sometimes images are overlapping. Could you please have a look and see where I'm going wrong? https://codepen.io/Afplaktape/pen/mdoejVN

I'm sorry that I wasn't able to explain it correctly and the best wishes for the new year of course!:) The problem occurs on the right side of the screen as seen in the gif below. Do you know how to solve this to make it a smooth animation? Thanks for you help so far!

Is there a way to make sure there are no whitespaces on the left and right before the images is loaded?

I'm trying to make them move smoothly and automatic like the codepen example but I don't want there to be moments where there are no images in the viewport. Not as a carousel or slider

How can I make sure these tickers will loop infinite without showing whitespace before or after when the animation is playing?

Thank you! .batch solved my problem:)

I want to add a class to some elements on my website to use the same animation on when scrolling in viewport. Everything works fine but when there are multiple elements next to each other I want to add a stagger effect. For some reason this is not working.... This is the code I'm using: const animateUp = gsap.utils.toArray('.animate-up'); animateUp.forEach(element => { gsap.from(element, { y: '50px', stagger: .3, opacity:0, duration: .8, scrollTrigger: { trigger: element, } }) });

I tried following the tutorial as good as possible. The words loop seamlessly now but I'm not able to influence the amount of time the words are being visible... What am I doing wrong here? https://codepen.io/Afplaktape/pen/poGvZWR

Thanks this helps a lot!! Super bedankt!:)

I'm trying to achieve this text effect: https://gifyu.com/image/S6eV2 But I'm not really sure where to start... Is there anyone who could point me in the right direction? Thanks:)