mayyar Posted August 23, 2021 Share Posted August 23, 2021 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 Link to comment Share on other sites More sharing options...
OSUblake Posted August 23, 2021 Share Posted August 23, 2021 Welcome to the forums @mayyar You need to do animate between a sequence of images, like shown in this thread. 1 Link to comment Share on other sites More sharing options...
mayyar Posted August 23, 2021 Author Share Posted August 23, 2021 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 More sharing options...
OSUblake Posted August 23, 2021 Share Posted August 23, 2021 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 More sharing options...
mayyar Posted August 23, 2021 Author Share Posted August 23, 2021 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 More sharing options...
OSUblake Posted August 23, 2021 Share Posted August 23, 2021 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 More sharing options...
mayyar Posted August 26, 2021 Author Share Posted August 26, 2021 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 More sharing options...
OSUblake Posted August 26, 2021 Share Posted August 26, 2021 Can you make a minimal demo? And you shouldn't use transform. gsap.to(".screen", { rotationX: 90, ease: "circ" }); 2 Link to comment Share on other sites More sharing options...
nico fonseca Posted August 26, 2021 Share Posted August 26, 2021 @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 4 Link to comment Share on other sites More sharing options...
mayyar Posted August 27, 2021 Author Share Posted August 27, 2021 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 Link to comment Share on other sites More sharing options...
Solution OSUblake Posted August 27, 2021 Solution Share Posted August 27, 2021 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 2 Link to comment Share on other sites More sharing options...
mayyar Posted August 27, 2021 Author Share Posted August 27, 2021 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 More sharing options...
OSUblake Posted August 27, 2021 Share Posted August 27, 2021 It doesn't look like you added any scroll trigger code. https://greensock.com/docs/v3/Plugins/ScrollTrigger Link to comment Share on other sites More sharing options...
mayyar Posted August 27, 2021 Author Share Posted August 27, 2021 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now