Jump to content
Search Community

Two images side by side sequence HELP

Mac1317 test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Hello guys, I am new to GSAP just got to know about it yesterday. I am trying to create a animation (example attached as gif) i want it like when i scroll down and on after reaching the center of the section it gets close to each other and after moving out from the section it moves away and vanish and on reverse vice versa, can any member help? Thanks. Codepen also attached. 


See the Pen RwBgWod by Mac1317 (@Mac1317) on CodePen

  • Like 1
Link to comment
Share on other sites

  • Solution

Hi @Mac1317 and welcome to the GreenSock forums!


In this case you have a very common problem. You're trying to make everything on the first step by creating the HTML structure, adding styles, creating the GSAP animation and adding ScrollTrigger to control that animation. You should always take things one step at a time. First add your elements in the HTML and give them the proper styles so they work as you expect in all devices. Then create the GSAP Animations and correct any styles issues in order to keep everything working. Finally when your animations are working in the way you intend add ScrollTrigger to the mix.


Right now neither the initial positions of your images nor the animation you're using is looking the way you intend. Look at your example without the first section and without ScrollTrigger:

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


This should be closer to what you want:

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


I suggest you watch this video to learn more:

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...