aszuster

Hi @Rodrigo thanks for answering! I see what you mean, and I saw that this is the issue because inspecting the element, as you said, devtools select the sixth slide and not the first one. But I tried with scrollmagic library with the exact same HTML/CSS and it works well that way (it uses GSAP but is super old, so I wanted to do it with the up to date library GSAP), so I think something is happening with the JS. this is the one that works ok with scrollmagic with same HTML/CSS: https://codepen.io/aszuster-dhnn/pen/MWQaYdm Thanks! ?

Hi! I have this scroll animation but I would like to be able to click buttons on different slides (like the button in the first slide, is unclickable), now looks like I can only make an interaction (selection, click) with the last slide. Is there a solution to this? Not really sure how to fix it Thanks!

Nevermind, I just fixed! The pin spacer was creating a -2 index, override it and all works perfectly!

@PointC It all works great in my project! One last issue (I hope), for some reason in my project, none of the links or the draggable slider seem to be linkable or working, do you know what could be causing that and if is fixable? I find it weird because if I put links on your pen they work perfectly (the project is big so I don't know how to show it here, but if you need I can try something to replicate it)

Thank you so much all of this is super useful and interesting! I'll give it a try

@PointC Another thing sorry, how to you get to create a clip path with negative numbers so it covers all the screen, I'm trying setting up some clip paths with https://bennettfeely.com/clippy/ but it doesn't work very well with a wipe like this (I need it to be from the other side like the video in the comment before this one) And i get weird combinatios Thanks!

Sorry this was the video I showed later (I had to delete it sorry if it was confusing), this is what I actually have to achieve, I'll give it a shot as what you say! but just so you know what exactly I have to do, I'll let you know later how it goes, thanks!

@PointC Great yes! The only thing, is it possible to show other section or div after it shrinks out to nothing, now i'm seeing the body background (black) how should I place the other section for it to be "discover" when #target shrinks down and hide everything else? btw thanks for the tip about the percentage! Thanks!

@PointCThere are 4 sections originally, when you scroll down until the second section you keep scrolling, shows that wipe animation that covers all the screen, then it wipes off (i don't know if this would be the term) and uncover the third section, it's like transition between 2nd and 3rth sections (in this example there are only two sections because I'm trying to focus on that specific part, keep in mind that each section originally its 100vh but here I set up at 50vh to test it without scroll) Thanks!

https://codepen.io/aszuster/pen/gOvzxwV I did another one testing and the problem seems to be that the second one doesn't animate, the second one just 2 seconds laters it disappears without animation, I'm not even sure if this is the right path to doing what I try to achieve ? sorry to bother again

Hey @PointC! I'm sorry https://codepen.io/aszuster/pen/RwQygqe Now I got everything white because the "target2" doesn't move and it's just a white, I don't know why the animation isn't happening, thanks!

Hi @PointC Sorry again, I can't seem to understand how to do that I tried some things but didn't work, here is my trial codepen https://codepen.io/aszuster/pen/WNMzEOp what I need to achieve actually exactly is this: I have a section, then scroll down, white transition wipe appears from a corner, then disappears from the other side and underneath will appear the next section. first, I'm trying to select a div container that wraps 2 sections (third and forth ones) but the animation still only happen in the first section, I don't know well how to give that sensation of transition between the first and second section with that wipe second, I'm still stuck with the first wipe, when the background with the text appears, but I can't do the second wipe for it to disappear again showing the second section third, how do you create your clip-path numbers? I'm trying with https://bennettfeely.com/clippy/ but I saw you use negative numbers and I can't do that there, I'm not sure how to achieve those kinds of patterns I hope I'm making myself clear, sorry to bother you! Thank you for your help!

Thank you @PointC! I think this is in the right direction, the other thing I need is after that, another wipe to go back to the background again but from another side (like the video) I'll play with it a little bit and see what I can do, and if I get stuck I'll write again, sorry, but again, this is great! Thank youu!

Hi, does anyone know how could I start doing something like this? I'm a bit overwhelmed, I've used scrolltrigger in the past, but I'm not sure how can I manipulate the screen that way, somone has any tips or how would you imagine doing something like this. Is it possible to animate a diagonal wiping effect? I've seen horizontal and vertical but not this way and i'm not sure where to start, thanks! POWERPNT_au02gFaYE2.mp4

Hi @PointC ! Thanks for answering, I'm trying to convert my project to ScrollTrigger entirely but I'm not really sure how to do for my next div below to appear on opacity 1 in the exact same place as the one before. As you scroll the first image and text should disappear and then the next image and text should appear in the same place, and then the next one like in this example https://ank.app/ (scroll a bit at the beginning), I guess it has something to do with pin maybe? But I can't seem to make it work right Thanks!

Hi! I did a codepen example of the scroll animation I'm doing on a website. Everything is working as intended: when the first div of text and image goes to opacity 0, the next one comes to opacity 1 in the same place as the last one. But what I need to fix is that it's taking a bit more time for the next one to appear after the one before disappear, I can see that there's a bunch of padding or space between the end of one and the start of the next one and I couldn't fix it, if I change the duration the animation will go faster but there still a blank between the animations. I don't know if I need to target another thing or something like that, I hope I'm making myself clear Thank you!

Thank you so much!!! Al of this is really useful, I'll be trying this out! Sorry about earlier

Hey! Thank you!!! ? Now can you tell me how do you guys see that? ? Because even with all zoomed in I can't see it and because of that I can't really fix it. But anyways, yea, that's my bad, that is a double line because I tried so many things and that one was expanded, but here it is with only one line, and it's even worse, it doesn't even follow the path https://codesandbox.io/s/spring-sky-dwys2e?resolutionWidth=714&resolutionHeight=675&file=/src/App.js I make it with the pen tool in illustrator, and it is really only one line, but I don't understand what is doing when I copy the code, I'm trying to search for some kind of way to at least edit the path only from code maybe? because this way doesn't seem to work. I'm really sorry I made another thread I'm really desperate ?

Hi OSUblake, Sure thing I will not make another thread, what should I do if I still need answers? Should I bump the other thread? Or just let it die? "Your path is probably wrong", what makes you say that before checking it? if you say "probably" I'll assume that you didn't see it. The last person to answer me already said that the path was fine, but thanks for answering anyway, I'll check those demos out and see if I can get an answer to this issue! ?

Hi! I'm using GSAP on React, making an animation with ScrollTrigger and MotionPath, I need the coin to follow the SVG path scrolling down from start to end and then go back when scrolling up. While the coin is on the path needs to always be on screen (ideally center), until the end and then stop there, only going up again when scrolling up from the bottom. Nothing too special really, something like this https://codepen.io/delwinh/embed/OJMRYbd?height=450&slug-hash=OJMRYbd&user=delwinh&tab-bar-color=%23222&name=cp_embed_1 but without the DrawSVG My animation is almost there, but I'm having a problem at the end, the coin starts going back up before you scroll past the bottom of the path, and I need for it to stay there. I think if I set the scroll end to the size of the SVG (4000) then it should work like that, but when I do that the coin starts going faster in the middle and goes offscreen, so in order for it to stay onscreen while scrolling down the path I had to set the end to 7500. I don't know how to make both things work Here is a codesandbox with what I've been trying, my code so far https://codesandbox.io/s/dark-fast-bu7bgu?file=/src/App.js&resolutionWidth=526&resolutionHeight=675T Thank you!

It's still bouncing back before you scroll to the end of the line, when you start scrolling up from the bottom the coin doesn't start at the bottom of the line like in this one https://codesandbox.io/s/gracious-hill-4s5fcy?file=/src/App.js I think that's because the end point is lower and in this previous example the end point is a bit before (up) the bottom of the line, but if I put the end point there in this one it goes crazy and the coin goes faster for some reason and goes ahead and out of the screen ? is there a way to fix the coin so that it stays at the center of the screen when scrolling down maybe? That way the end point could go at 4000 (or a bit less) which is the bottom of the svg path and then stay there at the end of the scrolling down and only go back up when scrolling up from the bottom. I'm sorry if I'm not making myself clear ?

Thanks for answering. I think the line is fixed now (I think both sizes are the same, but let me know if you still see a difference), but the coin goes ahead after some scrolling (at first it goes along fine). I tried to use different numbers in the scrollEnd variable (end in timeline), but none seems to work fine, if I put a higher number than 4000 (the height of the svg line) the coin will go and go back after reaching the end, If I put a lower number then it will go ahead and end and come back after reaching the end of the scroll. But with exact 4000 is not showing the coin at the center of the screen as the scroll goes by, you scroll and then the coin goes ahead an disappear from the screen. https://codesandbox.io/s/dark-fast-bu7bgu?file=/src/App.js&resolutionWidth=526&resolutionHeight=675

Hi @Trapti I'm really sorry to bother you again, but I have to make another different path for mobile and I'm having the same issue and I'm not sure how did you fix it, how to fix the SVG to work or fix the values, I tried using different values but I can't seem to match them to my path to work ? here is the codesandbox https://codesandbox.io/s/gracious-bas-brddgn?file=/src/App.js&resolutionWidth=320&resolutionHeight=675

Thank you so much!!! That seems to be it, I'll be working on it a bit more, I don't know how did you clean the SVG if you have a tip for that, would be appreciated, but either way thanks for all! ?

I'm trying to fix the line, I did one line with the pen tool with anchors, it's only one path in illustrator and I don't know where or why those other strokes are appearing. https://codesandbox.io/s/hidden-framework-klztsw?file=/src/App.js This is the last one I did but now the coin gets left behind at the beginning, is this still because the SVG is not an exact path? (btw how did you see the lines that zoomed in? Even at max zoom I can't see the line so good as the screenshot you sent, I'd like to use that to debug and see if I'm fixing something) Thank you for answering! Edit: https://codesandbox.io/s/twilight-violet-1k1f9f?file=/src/App.js this is another one I tried and the same keeps happening, is it still the line? Thanks!!