Jumping pin

[Dennyno]

Hi all,

Im  losing myself in an inch of water!

I need to transform the origin of the canvas on my demo and pin it, till the end of the document, then reverse everything when I scroll again near the very top.

To fake the perspective I used a clip-path (even I guess that using something like: 

 transformOrigin: "-500% 50% -100px", 
rotationY: 25,z: 500 m

 

May work even better for the cause.

Btw what's the problem of the jumping pin? 

Thanks

See the Pen ExLeWvx by DedaloD (@DedaloD) on CodePen

[Rodrigo]

Hi,

 

Super cool effect!!

 

The problem is that when the element enters back, the top position is 0 and then jumps to 50%, which is what is set in the animation. You can use the onEnterBack callback to set the top position at 50% preventing the jump.

let clip_polygon = gsap.timeline({
  scrollTrigger: {
    trigger: skew,
    start: "top top",
    //end: 'end' ,
    scrub: true,
    pin: true,
    pinSpacing: false,
    onEnterBack(){
      gsap.set(skew, { top: "50%", });
    },
  }
});

Let us know how it works.

 

Happy Tweening!

[Dennyno]

Hi @Rodrigo, thanks!

But even this, doesnt work!

Maybe it's my markup the problem.. I dont understand, I was trying also using flexblox and aligning to the center, neither that seems the right solution.

Btw thanks for sharing an idea

[Dennyno]

Tried playing here and there, but I'm still missing something...

[mvaneijgen]

I don't get what is going on. I had opened this topic looked at your code and saw a 1000 lines of JS, on which I immediately closed it.

 

Now I had some spare time and looked at it again. I had to first remove all your canvas code to even see what was going on. The effect is cool, but it's really hard to debug something with so much code!

 

I see that the canvas element gets unpinned when the end trigger is triggered. Is that your issue? Why not fully collapse the clipPath instead? 

 

See the Pen QWrVeQB?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

 

 

[Dennyno]

@mvaneijgen

 

Need to keep your yellow element (on my example the canvas, or it’s container) pinned.

always pinned.

 

like an opening door at 3/4.. 🚪

 

Fixed on that position till the end on scrolling, then again, reverse the animation when reaching  the top, but this element must always stay fixed there…

 

Reference: https://avanzare.eu/reframe_wp/demo/

 (Mobile view) 

Thanks

[mvaneijgen]

Having it pin with ScrollTrigger will remove it's pin as soon as the end trigger is surpassed. Just set its position fixed with CSS and removed the pinning with ScrollTrigger., then it will be always fixed. With position fixed it will be not part of the flow of the document, so if you want the content to start later you'll have to add another element with the same height as the canvas element.

 

See the Pen qBYJBMg by mvaneijgen (@mvaneijgen) on CodePen

[Dennyno]

Wow! Thanks! @mvaneijgen
Yep, now I see bright!

How to start reversing the animation only when reaching again the top? 

top -=400px (for example)

[mvaneijgen]

You could look in to the once property to only play it once and the onEnterBack or onUpdate call back to check when it should animate back.

 

I'm on my phone at the moment, so I can't do more at the moment 

[Dennyno]

Thanks,

I tried with the "once' property, and it freeze as I wished, now.. how could the onEnterBack work if is something that never enters back?

Is something conditional that Im missing I guess...

I maybe need to use also a scrollTo plugin, with something like if scrollTo Y:0 than reverse the animation?

(EDIT: not only the animation, but the whole timeline I guess, as I need go allow users going again back and forth . up and down)

See the Pen rNvqLWG by DedaloD (@DedaloD) on CodePen

[Rodrigo]

Hi @Dennyno,

 

What you could do is create a another ScrollTrigger instance that doesn't have any animation associated to it, using a proxy element that just sits there in the DOM. Also, instead of using the once property in the animation, use the disable method in the onLeave callback and with the proxy ScrollTrigger enable the animation ScrollTrigger and reset the animation progress manually. Here is an example, just check the changes in the HTML and CSS to see where I added that extra DOM node and the styling (which is pretty straight forward):

See the Pen ExLdLzx by GreenSock (@GreenSock) on CodePen

 

Of course the animation and general intention might need a bit of tinkering, but hopefully this will provide an idea to solve the issue.

 

Let us know how it works.

 

Happy Tweening!

[Dennyno]

Totally agree and that's a fkin' great solution!

I did something different, basically adding an extra pin on top of the dom, but your way seems also great!

Thanks @Rodrigo

See the Pen OJZBOYX by DedaloD (@DedaloD) on CodePen