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:)

I actually do want it to be a timeline animation because this was just for demonstrating purposes. I actually want more things to happen when a project is hovered (show a small discription, show a link button etc). If I would do this in the way you proposed I'd probably have to write the code two times but once in reverse right?

Trying to pick up on learning GSAP again but I run into a problem with a hover animation on an element that has multiple siblings. I have project page with a lot of project where I want a timeline animation to happen once that element is hovered. I either get it to work on all elements when only one is hovered or on none of them. I'd appreciate any help in the right direction.

Thanks! The only problem with deleting the vector-effect="non-scaling-stroke" is that it looks terrible on mobile. Do you know if there is a way to achieve a similar effect with masking?

Hi, I'm fairly new to all this and can't seem to figure out what to do here. I try to create a line animation that originates from the center and draws this shape to the top and bottom of the screen (responsive on all viewports). There is something going on with the animation also starting somewhere in the left top (however in this preview it seems normal but within codepen it doesn't). I feel like it's not starting in the center and the stroke width for the vertical lines change on a narrow viewport. Any help in the right direction would be much appreciated! Thanks in afvance:)

Wow! Thank you very much! I'm definitely going to check your tutorials! Just out of curiosity: Is one of both options considered best practice or are they equally good? And I guess none of this is possible without the payed version of gsap? Thanks again!:)

Hi all, Very new to Gsap (digging it!!) and I've been struggling with this one for quite some time now. I'm trying to get this wordmark to animate from the center line in both directions to both end points. I only get it to work with the outline but not with a fill. I've watched a lot of tutorials about masking but I just don't seem to get it. Hope there is somebody around here that can get me going...