Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mayyar

laptop animation with scroll trigger

Go to solution Solved by OSUblake,

Recommended Posts

Welcome to the forums @mayyar

 

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

 

 

  • Like 1
Link to comment
Share on other sites

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 ? 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

18 minutes ago, OSUblake said:

lid's rotationX property.

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

Link to comment
Share on other sites

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.

 

 

Link to comment
Share on other sites

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" });
```
Link to comment
Share on other sites

Can you make a minimal demo?

 

And you shouldn't use transform. 

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

 

  • Like 2
Link to comment
Share on other sites

  • Solution

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

 

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

4 minutes ago, OSUblake said:

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

 

sorry i update it now 

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.
×