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.

https://codepen.io/deinternetarchitect/pen/WNmZvaV Done, updated the codepen

Ill do this via my host. Hopefully its ok because takes to much time to put everything in a codepen: https://deinternetarchitect.com/ https://deinternetarchitect.com/js/custom.js I got a step further with what I need. So these questions I still have I am now animating backgroundSize: 100% auto. But that causes problems. Can I also zoom in a background size cover? Because of mobile / desktop I want this one to start after scrolling is done. And also they should animate in automatically. Now they are also based on scroll. How do I do that? tl.from([heroTitle, heroSubtitle, heroButton, heroList], {

@mvaneijgen I checked position parameter I get this now. I want to make the background grow during the scrolling animation document.addEventListener('DOMContentLoaded', function() { gsap.registerPlugin(ScrollTrigger); const overlay = document.querySelector(".section-bgmask"); const bgphoto = document.querySelector(".section-bgphoto"); const heroTitle = document.querySelector('#section-01 h1'); const heroSubtitle = document.querySelector('#section-01 p'); const heroButton = document.querySelector('#section-01 a'); const heroList = document.querySelector('#section-01 ul'); const tl = gsap.timeline({ 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 } }); tl.from(overlay, { duration: 0.5, // Duration doesn't work with ScrollTrigger scrub: true scale: 0.1, transformOrigin: "center", ease: "power2.out" }); tl.from(bgphoto, { backgroundSize: '100% auto', duration: 0.5 }, "<"); tl.to(overlay, { scale: 1, duration: 0.5, opacity: 0 }); tl.from([heroTitle, heroSubtitle, heroButton, heroList], { y: '200%', duration: 1, stagger: 0.2 }); This is how I should do it right?

Mijn dank is groot!

I needed to change the HTML structure a bit because the overlay was not in higher position then my header z-index. My codepen is updated. When I arrive at the blue section with scrolling the overlay is hidden trough opacity but its preventing clicking behaviour for example a button inside the section. So opacity 0 is not enough because its preventing clicking behaviour https://codepen.io/deinternetarchitect/pen/WNmZvaV Your other comments are clear! Thanx again

I do have 3 more questions. Opacity: 0 is not enough. It is interfering with other stuff on my site. const tl = gsap.timeline({ scrollTrigger: { trigger: ".hero", // Trigger elment pin: true, // Pin everything till the end then nomraly scroll scrub: true, // Tie animation to scroll markers: true // Show what ScrollTrigger is doing }, onComplete: function() { overlaycontainer.style.display = 'none'; } }); tl.from(overlay, { // with .from() GSAP will get the inital values eg scale: 1 duration: 2, // Duration doesn't work with ScrollTrigger scrub: true scale: 0.1, // set inital scale transformOrigin: "center", // set point from where to scale // opacity: 1, // This does nothing ease: "power2.out" }); tl.to(overlay, { scale: 1, duration: 0.2, opacity: 0 // Hide when done }); How can I make it so that when you return (scroll back up) is is on display: block again? How can animating something else (another div in the DOM) during the scrolling? And also, when scrolling is complete and animation is finished, how can I start another timeline with other elements animating? .from([heroTitle, heroSubtitle, heroButton, heroList], { y: '200%', duration: 1, stagger: 0.2 })

Amazing! This is exactly what I need. Heel erg bedankt!

Your right! I have changed the codepen and added the animation. Now I want 2 things: - When its finished the entire div should be removed (display none) - It should animate on scroll but I don't want to scroll whats behind it (yet). That should happen when animation is finished. So you basically scroll the overlay first and then user continues to scroll normally What do I need to add to make it work? https://codepen.io/deinternetarchitect/pen/WNmZvaV

Hi GSAP forum, I am a noob when it comes to GSAP (have followed a small course) and I want the following. I have a page with multiple sections. But in the first section I have a overlaying div with an image. When entering the page, when user starts scrolling I want that to scale (untill its out of view) and then you continue scrolling normally in the section behind it. I don't have a clue how to do this. Can you please help me with this? I have created a codepen: https://codepen.io/deinternetarchitect/pen/WNmZvaV