Jump to content
Search Community

How to image display and move on scroll

renny test
Moderator Tag

Recommended Posts

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free "how do I recreate the cool effect I saw in this video?" 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. 

Link to comment
Share on other sites

Hi there!

 

What exactly is it you're struggling with? You'll be more likely to get help if you narrow it down a bit.

Do you need help with timing, markup, planning it out, easing or a specific part of the animation? What have you tried, where have you got stuck?

More focused information or a GSAP specific question gives us more to work with!

Link to comment
Share on other sites

i have almost complete that animation, but not properly trigger start and end

 

1. ready to scan image display after right side dashboard full set
2. success image left side display after rady to scan show complete 

 

 

Link to comment
Share on other sites

I recommend taking a look at timeline's for sequencing your animation, the position parameter for precise timing and then the scrollTrigger docs and video for more information about how to handle ScrollTriggered animations.

The video is really useful!

Introducing ScrollTrigger for GSAP from GreenSock on Vimeo.

 

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

If there's something that you're struggling to grasp, let us know!

  • Like 1
Link to comment
Share on other sites

Hey again! I think the difficulty here is that you're trying to create an animation sequence with separate tweens. One of the main features of GSAP is the fact that you can create sequenced animation timelines 🥳

 

So let's step through the right way to approach this.

 

step 1.

 

Create a timeline with the complete animation sequence

 

here's a starting point - 


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



If you need help positioning elements on that timeline then give this article a read.

 

 

step 2.

 

Add one ScrollTrigger to that timeline. Pop back when you have a timeline you're happy with and I'll help you with this part too.

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