Jump to content
Search Community

Diagonal wipe movement animation with ScrollTrigger

aszuster test
Moderator Tag

Recommended Posts

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!

Link to comment
Share on other sites

  • aszuster changed the title to Diagonal wipe movement animation with ScrollTrigger

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!

Link to comment
Share on other sites

You can use the same clip-path and a .fromTo() tween if you're just targeting the background again.  If you need to clip all the elements, you can use multiple clip-paths. Say the first one is for the background image as in my demo. The second one could be for the whole container. Just stack up your elements in the proper parent child relationships and you'll be good to go.

 

Have fun.

:)

  • Like 1
Link to comment
Share on other sites

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 

See the Pen WNMzEOp by aszuster (@aszuster) on CodePen


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!

 

Link to comment
Share on other sites

I'd start like this:

Forget about ScrollTrigger for the moment. Create a simple div and place your child containers inside of it. They'll need to be stacked so you'll have absolute positioning. Once you have that, create a clip-path for each. Don't worry about diagonal yet - just a basic right → left or left → right. Create a timeline that animates each clip path in sequence to reveal (or hide) each container. After that animates to your liking, it'll be very easy to wire it up to a ScrollTrigger and change the clip-paths to diagonal.

 

Please give that a whirl and I'll help you if you get stuck.

:)

  • Like 1
Link to comment
Share on other sites

So, is the goal to reveal section 1 and then section 2 over the top of section 1?

 

I ask, because they are not stacked on top of each other. From what I saw in the video, that seems to be the goal, but I need to clarify.

 

Thanks.

Link to comment
Share on other sites

@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!

Link to comment
Share on other sites

Okay, let's see if this helps you.

 

I made a quick modification to my demo from above. I moved the star background to the #container rather than the target div  and just gave the target a blue background. So, now the timeline has two tweens.

  1. The first uses the clip path to show the blue background. The clip-path was originally set in the CSS to hide all of it. That appears behind the text because of the HTML stacking.
  2. The next one uses a clip-path for the #container. The original clip-path was set to a full reveal and we're just shrinking that down to nothing. This will hide everything since the .target div and the <h1> are children of the main #container element.

See the Pen jOZxarR by PointC (@PointC) on CodePen

 

Does that make sense?

 

PS Pro tip: Always use percentages in the clip-path even if it's 0.

 

  • Like 1
Link to comment
Share on other sites

@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!

Link to comment
Share on other sites

What other div? That's what I was asking about above. ;) The video shows the elements erase to black.

 

The short answer is yes, you can show another element. You may need to wrap the target and the text in another div and erase that to reveal another div or section underneath them. You can stack as many elements as you like. It's all in the planning and layering. Give it a shot.

Link to comment
Share on other sites

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!

 

Link to comment
Share on other sites

@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!

Link to comment
Share on other sites

I don't think you'll find an online generator that will give you negative values. It's usually easiest to just grab a pencil and paper and sketch what you need. Clip-paths are relative to the element so in this case - upper left → 0% 0%, upper right → 100% 0%, lower right → 100% 100% and lower left → 0% 100%. You can exceed 100% and you can use negative values.

 

Also keep in mind that you are not limited to 4 points. You can add as many as you like and come up with interesting animations.

 

But like I said, it's usually best to sketch it out on paper. Think about where the start and end points would need to be to achieve a diagonal. 

 

Give it a whirl. Happy tweening.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

@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)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...