laptop animation with scroll trigger

[mayyar]

Hello , i hope some one can help me , how i can do like this effect in gsap , not latterly same , but i want to open laptop win scroll , is there a way with gsap ?

thank you in advance 

reference :https://www.apple.com/macbook-pro-13/

 

https://postimg.cc/ftRJTW5M

[OSUblake]

Welcome to the forums @mayyar

 

You need to do animate between a sequence of images, like shown in this thread.

 

 

[mayyar]

3 hours ago, OSUblake said:

Welcome to the forums @mayyar

 

You need to do animate between a sequence of images, like shown in this thread.

 

 

thank you for replay , i have to get an sequence images of laptop in different Position and animate between them ? 

[OSUblake]

Well, that's how Apple does it, but if you're doing a simple laptop, you might able to just animate the lid's rotationX property.

[mayyar]

18 minutes ago, OSUblake said:

lid's rotationX property.

Yes exactly , but sorry , where can i find the fragmented laptop !

[OSUblake]

A graphic designer could make one for you.

 

You could probably do one is just pure CSS too. Try searching around CodePen. 

 

I can't enter the search link, but just search on CodePen for CSS laptop.

 

 

[mayyar]

On 8/23/2021 at 10:10 PM, OSUblake said:

Well, that's how Apple does it, but if you're doing a simple laptop, you might able to just animate the lid's rotationX property.

When i add RotateX , not rotate just streched  

```

    gsap.to(".screen", { transform: "rotateX(90deg) ", ease: "ease:Circ.easeOut" });

```

[OSUblake]

Can you make a minimal demo?

 

And you shouldn't use transform. 

gsap.to(".screen", { rotationX: 90, ease: "circ" });

 

[nico fonseca]

@mayyar If you need some 3d rotation effect and not stretched, you need to set a perspective and translateZ.
You can see more here.

And I made a demo so you can see how to do that with GSAP 🙂

See the Pen 90103219a509efadc945c662246b58fc by nicofonseca (@nicofonseca) on CodePen

[mayyar]

16 hours ago, OSUblake said:

Can you make a minimal demo?

 

Hey , yes sure 

See the Pen MWowqvo by LoliaTrafam (@LoliaTrafam) on CodePen

i want to flip a red one to look like screen laptop closed and open

[OSUblake]

Just like @nicofonseca said, you need to put a perspective on the container. I just changed his transform origin.

 

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

 

[mayyar]

5 hours ago, OSUblake said:

I just changed his transform origin.

thank you for answer Mr, but it not work with scroll trigger 

See the Pen qBjdwew by LoliaTrafam (@LoliaTrafam) on CodePen

[OSUblake]

It doesn't look like you added any scroll trigger code.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

[mayyar]

4 minutes ago, OSUblake said:

It doesn't look like you added any scroll trigger code.

 

sorry i update it now