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!