Jump to content
Search Community

Image transition on scroll with text

Vineeth Achari test
Moderator Tag

Go to solution Solved by Vineeth Achari,

Recommended Posts

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

 

Or in other words: If you can manage to specify your question and simplify down your demo to the bare minimum neccessary, you will significantly increase your chances of getting a helpful answer. We just can not dig through hundreds of lines of code, try to identify what it is you might be referring to as the team section and try and guess what type of effect it is you may want to achieve - that is just too much to ask from free support.

Link to comment
Share on other sites

Hi Steve,

 

when i scroll the sections, pin or sticky is not working, the section has to be stuck and the content and image only has to move upward. thats not happening. If i scroll the content right side image section should be keep change.

Here's the updated link.

See the Pen NWyQOOb by vineethachari (@vineethachari) on CodePen

 

Much Appreciate your help!

Link to comment
Share on other sites

 

Hello @Vineeth Achari

 

11 hours ago, Vineeth Achari said:

when i scroll the sections, pin or sticky is not working

 

position: sticky won't work with smooth-scrolling on elements inside the container that gets the transforms for the smooth-scroll applied - but you also don't seem to use it in your code.

 

The reason your ScrollTriggers are not working is because you create them before you set up loco scroll and before you set up the scrollerProxy etc.

 

You can check by trying to log out the loco-scroll instance in different places, e.g. - when you create the ScrollTriggers it returns undefined which means it wasn't created yet.

 

See the Pen BaYXegL by akapowl (@akapowl) on CodePen

 

 

 

If you want things to work with loco-scroll, you will have to make sure to stick to the order of things being created, as it is to be seen in the loco-scroll example in the .scrollerProxy() docs.

 

And since you are also trying to use barba, you will have to be extra careful about when to call what, because you will have to adapt to barba's lifecycle. Giving you advice about how to handle barba is way out of scope for these free GSAP support forums though - especially if your code has several hundreds of lines to parse through to begin with.

 

It will take quite a bit of re-consideration for how and when to create/fire things, which we just can not offer to do for you.

If you need help getting all those to properly work together,  you can find lots of helpful links on barba's website.

 

https://barba.js.org/docs/getstarted/useful-links/#Developer

 

Good luck with the project and happy tweening!

 

  • Like 1
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...