how to add a parallax effect background while scrolling sections

[Sortium]

I wanted to add a background and while showing the animations of the sections it goes through the background, like a parallax effect.

could someone help me with this please?

See the Pen 0b5a30b2352ce90d92727a862259c476 by akapowl (@akapowl) on CodePen

[Rodrigo]

Hi @Sortium and welcome the GreenSock forums!

 

There are no images or backgrounds in your example. Maybe you can look at this example in order to have an idea of how to achieve parallax background images:

See the Pen QWjjYEw by GreenSock (@GreenSock) on CodePen

 

Hopefully that's enough to get you started.

 

Happy Tweening!

[Sortium]

Thanks,

but i wanted to make an effect with just one background during all word sections.

[mvaneijgen]

@Sortium but your example has no images, so we can't really see what is not working for you. Could you maybe try your hand at adding the images you want and sharing that demo. Even if your demo doesn't work we can better understand what your question is. 

 

Just try adding the animations how you think they should work, this way we can better understand your thought process and it will be easier for us to help you. If you could then explain your issue like so, this will help us give you a solid answer:

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 

 

Personally I the find best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in.