Jump to content
Search Community

scroll trigger animation and image as parallax combined(not image as background)

crmichael test
Moderator Tag

Recommended Posts

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.

Screenshot 2021-08-17 112752.png

Link to comment
Share on other sites

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! 🙌

  • Like 1
Link to comment
Share on other sites

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

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

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

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

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! 

  • Like 2
Link to comment
Share on other sites

  • 2 months later...

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

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.

 

image.png

 

  • Like 3
Link to comment
Share on other sites

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

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.
×
×
  • Create New...