crmichael Posted August 18, 2021 Share Posted August 18, 2021 i want an animation as an attachment section on below so on scroll first it animate blocks when comes in viewport and than image act as parallax.. i need both in same function and same as reference. reference url - https://cuttings.websitestaging.live/about-us/ reference section on above url needed as attachment here. Help would be appreciated with codepen demo. thank you. Link to comment Share on other sites More sharing options...
GreenSock Posted August 18, 2021 Share Posted August 18, 2021 Sure, that's totally doable. We don't really have the resources to build things on-demand in these forums (please read the forum guidelines), but I'd suggest giving it a shot yourself in a simple CodePen and then shoot us a minimal demo if you get stuck with a GSAP-related question. We love helping with those! I saw some of this video the other day and I think he shows how to do that "scale up inside the image frame" effect with ScrollTrigger: I assume that's similar to the effect you wanted(?) Maybe it'll at least give you some ideas. You don't need to use LocomotiveScroll. Thanks for being a Club GreenSock member! 🙌 1 Link to comment Share on other sites More sharing options...
crmichael Posted August 18, 2021 Author Share Posted August 18, 2021 i checked above video but thats not all requirement. i have created codepen demo with scroll animation as - See the Pen dyWBMea by shravan-softechure (@shravan-softechure) on CodePen Requirement:- same animation effect and image parallax move inside container on scroll as bottom 3 images on reference : https://cuttings.websitestaging.live/about-us/ Link to comment Share on other sites More sharing options...
mikel Posted August 18, 2021 Share Posted August 18, 2021 Hey @crmichael, This example could give you some pointers. See the Pen b42d4a0106c9a496950ca256281746b2?editors=0110 by mikeK (@mikeK) on CodePen Is it helpful to you? Happy tweening ... Mikel 3 Link to comment Share on other sites More sharing options...
GreenSock Posted August 18, 2021 Share Posted August 18, 2021 I assume you were looking for something like this?: See the Pen VwbJdNN?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
crmichael Posted August 19, 2021 Author Share Posted August 19, 2021 10 hours ago, GreenSock said: I assume you were looking for something like this?: parallax effect is perfect but animation on scroll trigger is not as required.. exact requirement is same as on bottom 3 image of below link:-https://cuttings.websitestaging.live/about-us/ Link to comment Share on other sites More sharing options...
mikel Posted August 19, 2021 Share Posted August 19, 2021 Hey @crmichael, What do you mean by 'animation on scroll trigger is not as required' ? You need a trigger to start the animation. See the Pen 363b79a78fbedd840f58ca7faf8c6189?editors=0110 by mikeK (@mikeK) on CodePen Happy scrolling ... Mikel Link to comment Share on other sites More sharing options...
crmichael Posted August 19, 2021 Author Share Posted August 19, 2021 18 minutes ago, mikel said: Hey @crmichael, What do you mean by 'animation on scroll trigger is not as required' ? You need a trigger to start the animation. Happy scrolling ... Mikel 'animation on scroll trigger is not as required' means animation is not as needed(trigger is fine).. and in your last pen parallax not there its just animation trigger. i need both triggered animation(swipe image) with parallax effect(on normal scroll) on image Link to comment Share on other sites More sharing options...
GreenSock Posted August 19, 2021 Share Posted August 19, 2021 9 hours ago, crmichael said: 'animation on scroll trigger is not as required' means animation is not as needed(trigger is fine).. I don't really understand what you mean either, but you probably just need to fix your CSS or something. If you have a GSAP-specific question, please provide a very clear minimal demo and describe specifically what isn't working the way you want. Link to comment Share on other sites More sharing options...
crmichael Posted August 20, 2021 Author Share Posted August 20, 2021 The codepen solution you have provided above only has a solution for the parallax effect on the image. The issue we are facing is that we would like to have the "swipe" intro animation of the image as well as the parallax effect triggered on scroll in the same module. As sent above the 3 images at the bottom of this page is the perfect example of what we are trying to achieve. https://cuttings.websitestaging.live/about-us/ Any help here is much appreciated. Kind regards, Chris Link to comment Share on other sites More sharing options...
GreenSock Posted August 20, 2021 Share Posted August 20, 2021 1 hour ago, crmichael said: The codepen solution you have provided above only has a solution for the parallax effect on the image. Actually, that's not true. Look at the code - the first ScrollTrigger is for the initial reveal of the image(s). I even put comments in there for you. Maybe you just need to scroll down faster or adjust the start value so that it waits longer before running that reveal. I don't understand what you mean by 'swipe intro animation'. I don't know what exactly is different than you were expecting, but we really can't provide "built-to-order" solutions for free in these forums. Hopefully the code I've already given you gets you headed in a good direction. 👍 If you don't want the image to be scaling up as the container expands, you'll need to set up your CSS so that the image is the correct size initially. Again, that's more CSS-related than GSAP. We'd be happy to answer any GSAP-specific questions but please read the forum guidelines - "here's a cool site/effect...can you tell me how to build it just like that?" isn't something we can generally provide here for free. I'd encourage you to give it a shot in a CodePen and then if you run into trouble with a GSAP question, post back here with that minimal demo and we'd be glad to take a peek. Thanks again for being a Club member! 2 Link to comment Share on other sites More sharing options...
crmichael Posted October 21, 2021 Author Share Posted October 21, 2021 Hello, Just an update here we were successfull in finding a solution to the above however the gsap animations seem glitchy and have a lag when viewed on mobile. Please see this link here https://imsu.websitestaging.live/producttier1/morning-mist-3/. Both the split text and image animation appears strange. We have tried to troubleshoot with deactivating plugins and removing other elements on the page but still no luck. Do we need to add some other code rules for mobile? Kind regards Chris Link to comment Share on other sites More sharing options...
OSUblake Posted October 21, 2021 Share Posted October 21, 2021 Hi crmichael, There is no magic code to make stuff run better on mobile. You have to be mindful of what you are telling the browser to do, and that site you linked to has a lot going on. It runs pretty choppy on my desktop. You should probably tone it down a bit, or consider using a faster renderer like PixiJS or Three.js. Just to render those 3d views takes over 40ms. An animation update should ideally be no longer than 16ms. 8ms is even better to match the refresh rate of modern screens, like the new iPhone. 3 Link to comment Share on other sites More sharing options...
crmichael Posted October 28, 2021 Author Share Posted October 28, 2021 Hello, Thanks for your reply. I do agree there is a lot going on, which makes sense as to why mobile was struggling. However I have removed the 3 big animation modules from this page on mobile and there is still an issue. As you can see on this page there isn't much going on now, but still the animation is glitching. Can you please shed some light? https://imsu.websitestaging.live/products/morning-mist-4/ Appreciate your help. Cheers, Chris Link to comment Share on other sites More sharing options...
OSUblake Posted October 28, 2021 Share Posted October 28, 2021 It's hard to troubleshoot live site. I would start by disabling whatever you're using to do the smooth scrolling, adding will-change: transform; to any elements you are animating with transforms, and fix the source of this problem. It looks look you are trying to create a ScrollTrigger on every single scroll. 1 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