dogzzz

I'm trying to get the text to change when the user is at one of the four cars. I'm trying to hook in to the onComplete function to track _d.x but the positions between the two extremes is different every time I drag. What I want is when you scroll to the second car you get the old text fade out and the new text fade in and the same for the next two cars, and when you drag back you get the inverse (which I think will be automatic if the tweens are set up right). I've updated the codepen here with some text above and code in the onComplete function but I'm not sure if I'm going about this the right way https://codepen.io/zrrrrr/pen/OJZrJbd Thanks so much for your help

Thank you very much!

Hi there, How can I make it so that as you scroll down the opacity of the image goes to 0 (rather than it being based on time) For an example of desired effect see the top hero of https://www.apple.com/uk/ipad-air/ Thank you very much

pending

Ok I've managed to get the frame numbers (0, 95, 205, 298) but I need a way to be able to snap and skip to a certain frame which I can't seem to be able to get done. I've been on it all day. I need to be able to hook in to a master timeline as well as I need to do some text animations at the same time. Would you be able to explain how to be able to easily navigate and snap to fixed points along the showreel and how I can hook in at those points to set off text animations? Thank you so much

Great thank you Is there a way to snap to each of the four cars if you drag closest to one of them? Also can I use the same timeline to animate text over the top when you hit each car? Thanks

I've updated the codepen, now the drag event loops it straight through the whole sequence but I want to be able to stop throughout (as scrolltrigger would) but using drag instead, surely this must be possible? Thanks

Ok so looking at https://www.polestar.com/uk/ I noticed that the animation is actually a drag animation not a scroll animation. I am trying to get a nice draggable animation going, I have managed to draw upon the gsap example to scroll through images which is nearly what I want but I want the seamless scroll effect that you would get with scrollTrigger. I made a codepen here: https://codepen.io/zrrrrr/pen/JjvBMLR I want to be able to just use Draggable and not ScrollTrigger. I want to flick through the images. They don't have to be on a canvas but I have a feeling thats what makes the smooth image replacement effect work. Please could someone help explain how to be able to flick through images with draggable? Thank you !

Absolute legend thank you!

Hi, I have a related question; I want to have text that changes opacity on scroll which I have managed to achieve BUT when I want to pin and pinSpace it so that its held on the screen until the user has finished scrolling, I'm getting some weird results (see codepen attached -- if you try uncommenting the pin and pinSpacing options). Not sure why this is the case. Is it possible to pin/pinSpace the changing opacity text so it stays on screen until the user is finished scrolling? Thanks Codepen here: https://codepen.io/zrrrrr/pen/zYWWjQq

Thank you so much for your help!

Hi there, I want to implement pretty much exactly what is in this example ie the layered scroll, however after the first panel slides up (red) I want to continue with the normal document flow. Do I have to put everything inside of the red panel for what I want afterwards is that the only way to do it? Or is there another way. Also when I've been coding it myself I had to set the height of a panel to 100vh rather than 100%. I tried setting the body to 500vh but anything after will continue to layer over the previous layer. I only want this to occur for the red panel and then after that to carry on as normal. For example see https://www.apple.com/uk/iphone-13-pro/ for the desired effect Thank you DZ

Fantastic many thanks for your help!

OK basically I'm trying to get the text to fade in and out as the timeline moves on, but for some reason it's waiting until the end to animate? The below means 'fade #one to zero opacity 20% in to the animation' , then immediately fade #two to opacity one, then 20% later fade #two to 0 and then immediately fade three to opacity 1, doesn't it? tl.to('#one', {opacity: 0}, "+=20%"); tl.to('#two', {opacity: 1}); tl.to('#two', {opacity: 0}, "<=20%"); tl.to('#three', {opacity: 1}); https://codepen.io/zrrrrr/pen/vYRZmgx Is there a way to get it to line up with the timing of the cars? Thank you! PS: Since i posted this I've made some buttons that use window.scrollTo to move the scrollbar when you click to the 'slide' I want which kind of works. I can apply that to this. Just not sure that the 'gsap' way of doing it

Ok the only thing that is working is having a timeline animating the opacity of each one *

That's awesome, thank you! I'm looking at doing the pop up description and progress bar that are linked to the progress of the timeline. I've experimented with scrollTrigger's onUpdate => self => console.log(self.progress) and then saved self.progress in state and then used that to specify conditional logic to show/hide html but the results aren't great! (it's jumpy and causing a lot of re renders updating state each time the progress changes). Is there a useful method / gsap property I can get hold of so I can respond to the progress of the animation to display the correct html at certain points during the animation? Thank you so much

Can I ask a Q - so it's great that you can drag it to the right and left in the above - how can I set 4 'snap' points for it to snap to along the way (ie one for each car)? Thank you

Thanks a lot for your help!

Hi there, I'm trying to make a draggable (horizontally) image sequence like the one on Polestar.com (see https://www.polestar.com/uk/ , second block down). It's not a traditional slideshow because theres lots of images to scroll through between each slide. The closest thing I can think of is a horizontal airpods scroll, but that's not quite it as it needs to be able to be dragged and it needs to scroll horizontally not vertically as you scroll. I can see a transform translate(X) going on as you drag, as if all the images are laid out across the page? Just wondering what the best way to go about this is/ what gsap tools will help to achieve the end goal? Thank you so much

Thank you, have updated the codepen in case that helps anybody who comes here -- putting everything into one timeline made it all work perfectly

Fantastic thank you :)

Hi there, I'm trying to replicate the animation about halfway down this page: https://www.vanmoof.com/en-GB/s5 I've managed to get the opacity of the 'pin-me' section to go to 0 as I want, and I've managed to get the 'pin me maybe' div with the title to pop out and become fully opaque at the end of the scroll. However, I want the title to pop out as soon as the pin-me div has faded out, ie that goes away and the title pops out over it. At the moment you have to keep scrolling down the page to see the effect, but I want it to be part of the same animation. Please could I get some advice on how to achieve this? It's probably quite simple I just can't see it I've made a codepen here: https://codepen.io/zdogg/pen/oNEqzWR Thank you

Fantastic thanks so much!

Thanks so much really appreciate that I just wanted to clarify something as well When you scroll down this page: https://www.vanmoof.com/en-GB/s5 The text that comes in with the masking box on scroll that says 'Revolution, built in' , can this all be done with clever use of ScrollTrigger (and perhaps scale and opacity on scroll)? Also the rather complicated graphic below (which I can only akin to the Airpods tutorial where the background moves on scroll and text comes up over the top), can that also be done with expert use of ScrollTrigger? (Indeed, was this animation itself done with ScrollTrigger?) Thank you very much

Hi there, If you scroll down this page from 'theft defense' to 'super smart electronics' : https://www.vanmoof.com/en-GB/s3?color=dark you get a few interactive animations that respond to click and hold (as well as click, hover and scroll). I can't quite tell how these are made, i can see a canvas element and a '___gl' class on them. Has a designer created an animation and it gets activated with javascript? I've looked in the inspector but can't see much. Would the spinning wheel in the intelligent motor section be an svg or some kind of webgl or other graphic that simply gets activated on click? Is the bulk of the work with the designer getting the canvas right and then gsap can be used over the top? Perhaps there's no use for GSAP with this one at all? Similarly with the hold to brake animation below, is that an interactive svg or canvas illustration or something? has someone made that with adobe and exported it? Is there another library or programme to make that and then the interactivity gets dealt with separately? On the super smart electronics one, does gsap deal with click and hold? Also is there some programme to make those graphics and they just get rendered on a canvas which can then be made interactive? Thank you for your advice