De Internetarchitect

Is there a slider made that is not based on absolute positioning? I want the content of the slides to decide the height of the slider and not based on fixed heights. Can't seem to find any example of this on codepen

I have this pen: https://codepen.io/deinternetarchitect/pen/LYvpqgw When its at the end of the loop there is no gap between the words or it sometimes overlaps (words run trough each other). What I am doing wrong / how to prevent this?

I want to make a slider with GSAP that is exactly like this: https://swiperjs.com/demos#pagination-fraction With arrows With a slide counter that shows amount of slides and current slide I am at Is there a code example of this that I can re-use?

How do I make an infinite text marquee with GSAP that: Does not have a gap in between Works with smaller font Works on a ultrawide screen Something like this but then without a gap: https://codepen.io/deinternetarchitect/pen/MWRaGGJ

@mvaneijgen how do I combine those? I don't see it in your provided codepen example

https://codepen.io/deinternetarchitect/pen/abxbBWv

I have this timeline. const tl = gsap.timeline({ defaults: { ease: "none" }, scrollTrigger: { trigger: "#section-01", pin: true, // Pin everything till the end then nomraly scroll scrub: true, // Tie animation to scroll // markers: true, // Show what ScrollTrigger is doing,, end: 'bottom 66.66%', onLeave: (self) => { self.kill(true); overlay.classList.add("hide"); window.scrollTo(0, 0); }, onLeave: () => done.play(), // Play some other timeline } }); I want 2 things to happen onleave (self.kill + done.play) How do I write this in order to get it working?

@mvaneijgen see my pen. When scrolling back up I get a empty white space (exactly the 50% of the section). How can I prevent this? https://codepen.io/deinternetarchitect/pen/WNmZvaV

Got it! Thanx so much

@mvaneijgen how can I prevent the scrolltrigger animation to start again when I scroll up? I basically want it to only show when loading page and scrolling down. (just one time) https://codepen.io/deinternetarchitect/pen/WNmZvaVhttps://codepen.io/deinternetarchitect/pen/WNmZvaV

Ok will do! Thanx

@mvaneijgen I have updated my pen but every time I try to include the url it does not load in my message for some reason. Ill add in a code block. Ive checked the timeline add url but I don't get exactly where to add it and also why it does not make any difference now (don't see a delay). See in my code pen line 45. https://codepen.io/deinternetarchitect/pen/WNmZvaV

@mvaneijgen can you show me an example of what you suggested? Ive updated my pen: https://codepen.io/deinternetarchitect/pen/WNmZvaV

@mvaneijgen I have another question. After the scrolling animation is finished. Can I extend the time that the scrolling is pinned with a couple of seconds? So that the animations that are playing OnLeave first can finish before the normall scroll starts.

Perfect! thanx so much. Last question. When the mask is fully scaled. You see that its moving up. Because of the scrolling still being in progress. How can I prevent that. I want it to be gone and not seeing it being moved vertically. Can I maybe also choose the end point for my scrolling animation? just like the start point: start: 'top top' Update: I have tried "end" it but does not really does the trick. The end point should be the end of the section but the mask should disappear earlier so when its fully scaled it does not move around.