Jump to content
Search Community

Multiple image sequence in middle of page

niks0203 test
Moderator Tag

Recommended Posts

Hi

I need to develop multiple image sequence using ScrollTrigger like the verkada access page https://www.verkada.com/access-control/ (first section). I have the section on the middle of the page. So i am facing 2 issues- one after the last scroll, at the scroller-end, there is a black background where i need the last animated slide instead of black background. Second, the scroller-start position shifts down if we refresh the page when the scroller is in middle section of the page 

scroll-end.png

See the Pen yLKbLZP by niks0203 (@niks0203) on CodePen

Link to comment
Share on other sites

Hey there!


I can't replicate this - could you explain the steps to recreate this issue?

Quote

Second, the scroller-start position shifts down if we refresh the page when the scroller is in middle section of the page 

 

Could you explain what you mean by 'last scroll' and which scroller-end you're talking about?

Quote

One after the last scroll, at the scroller-end, there is a black background where i need the last animated slide instead of black background.


I've added id's for easier wayfinding

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



 

Link to comment
Share on other sites

  • You had multiple elements with the same ID and you created conflicting animations
  • The container of your various canvas sections had a height of 500vh, creating that empty space at the bottom
  • You had position: sticky which was messing some things up with the pinning
  • The height of one of the containers of your canvas was 88vh instead of 100vh, so it was clipping it. 
  • Another sub-container was set to 100vh which was preventing pinSpacing from having any effect (clipping)

Basically, there were a lot of problems with the setup and structure in your CSS/HTML. 

 

I don't have time to fix everything for you and I'm not even really sure what effect you're looking for, but maybe this will give you a nudge in the right direction: 

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

 

Link to comment
Share on other sites

Hi ,

Thanks for the help,  I am actually looking for the 2 image sequence to run one after another in the same container and so i kept them sticky . I want "A magical connection to your devices" to run first followed by "Simplicity from start to Siri" but at same location. So could you please guide me the correct way to achieve it. I thought of an alternate way of running all  frames in one canvas but i want text to appear at different positions like we have on this website https://www.verkada.com/access-control/. Basically  i want the animation similar to one just below the header. 

 

 

Link to comment
Share on other sites

Hey again! 

What would be the most helpful for you here is to step back, get rid of the code you currently have (for now) and just break down the text animation. All that's happening is there's a container that's pinned and some text that's scrolling.

Here's a starting point. Simplify simplify simplify. It's always the way forward.

See the Pen poLwyBz?editors=1010 by GreenSock (@GreenSock) on CodePen

  • Like 2
Link to comment
Share on other sites

You'd need to replace the image with the canvas and then use the code from the previous example.

 

We're happy to help with GSAP specific questions if you're stuck, but you have all the information here necessary to make a stab at it yourself now. Why don't you give it an attempt?

 

Good luck!

Link to comment
Share on other sites

Hi,

I have edited my pen 

See the Pen poLrodj by niks0203 (@niks0203) on CodePen

. But I am unsure of using "to" with  ScrollTrigger.create(). I have used canvas behind the text but failing to aniamting it.

Also , I am looking for  a way where I can control at what framenumber should i animate the text "one" , "two" and "three".

Please advise.

Link to comment
Share on other sites

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "here are my requirements: ______, please show me how to build it" 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,

I was able to solve my issues above. I just wanted to understand if GSAP has some kind of preloader function which waits till all images are loaded. Currently my code has 110 image frames and each image is around 200 - 300 kb which is taking some time to render thus breaking the animation in between. 

 

Link to comment
Share on other sites

I am asking because before my animation starts, the contaiiner has all elements visible  and only when the animation starts (which i come to know because of markers enabled), the elements start appearing in proper flow

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