Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
shoshodunno

My image cards are not visible when scrolling

Go to solution Solved by akapowl,

Recommended Posts

Hi guys,

 

I am making a small coffee menu using GSAP animation, but my bakery section is not working as I expected. I would like  to scroll down and the card images (which takes up 100% width) reveal themselves one after another horizontally (like this:

See the Pen YzygYvM?editors=0010 by GreenSock (@GreenSock) on CodePen

).

But there's only one card visible and moving . Can someone tell me where I could possibly make the mistake? 

 

Thanks very much!@!

See the Pen RwVOPpN by cmtran (@cmtran) on CodePen

Link to comment
Share on other sites

  • Solution

 

Hello @shoshodunno

 

There is only one card showing because of how you have things styled in your CSS.

First and foremost you probably shouldn't have your cards positioned absolute for this to work.

 

Then e.g. apply some flex logic and you should be good. Try this:

 

.container-2 {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  display: flex;
}

.container-2 .card {
  height: 80%;  
  width: 100%;
  flex: 0 0 100%;
}

 

https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flex

 

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

@akapowl sorry, but could you help me with another issue? The parachute guy in the Order section, after I scroll upwards and downwards a few times, he disappeared. Only the text is animated no matter how many times I scroll... 

Link to comment
Share on other sites

 

That seems to be related to the tween in your onEnterBack callback there. 

The guy stays visible, when I remove it.

 

Just for my understanding; What is the purpose of that tween?

  • Like 1
Link to comment
Share on other sites

@akapowl my intention was to reverse  the tween when I scroll back up (i.e, the parachute man animated from the ground back to the sky) 

Link to comment
Share on other sites

 

Looks to me, like what you are actually doing with that tween is to tween him to his final position on the y-axis again, which is below/outside of that section and since you have overwrite set to true that will overwrite any other tweens on that parachute-guy, thus he won't be visible anymore after that.

 

Since you have a scrub set, the timeline will play in reverse anyway when scrolling back up, so I do not see a real necessity for that tween.

 

Some sidenotes:

  • the toggleActions you have in that same scrollTrigger does not do anything. toggleActions and scrub are exclusive properties, they don't work alongside each other. When you have both set, the scrub will always be the one taking control of your scroll-animations for that ScrollTrigger.
  • ScrollTriggers do not have a duration property. The duration - i.e. the amount of scroll - is being defined by the start and end of a ScrollTrigger. So maybe what you meant instead of duration: "150%" is end: "+=150%" ?
  • let parachute = new TimelineMax({ ... }) is old syntax. I would suggest using the newer GSAP3 syntax for timelines: let parachute = gsap.timeline({ ... })       
  • Like 4
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.
×