Jump to content
Search Community

Array animation not knowing position of elements on page refresh

Adam.shires test
Moderator Tag

Recommended Posts

Hey guys,


So I'm building a website for a client at the moment and have been writing a large scrollTrigger animation for the page. Everything is going great, but I can't get my head around one issue. So I've built a section with 700vh to act as a sticky section (not using pin) inside I've got a 100vh container with a number of divs inside, each with text. The container holding the text rolls through the viewport and, what is supposed to happen is; when the text inside the container hits the center of the viewport an animation starts which scales the text, and a strikethrough line crosses it out. So far it's going well and This can be seen in 'image A'. However, when I refresh the page their position in the animation isn't updated to the viewport 'image B'. I realise this is my fault and not scrollTrigger's as I've built the array to target the trigger so the calculations are obviously being made with it's original position in mind rather than the new position. This can be seen in 'image C' where the markers are shown significantly further down than the triggers. But there's also some strange behaviour that if all the trigger elements in the array are on screen, then it has no problem with the refresh, 'image D'.

I've included a pen, with a similar build to what I'm working with and was hoping someone could offer some advice on what would be a better solutiuon to build this rolling text effect out. Thanks so much in advance 🙏

image A.jpg

image B.jpg

image C.jpg


See the Pen BarOJBB by Geeza82 (@Geeza82) on CodePen

Link to comment
Share on other sites

I read your post a few times and I'm still very lost.


We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free "here is my list of requirements: ____ now please tell 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. 


Your minimal demo didn't seem to make the issue clear (at least to me). Maybe instead of a detailed description of everything happening in the "real" project with accompanying screenshots that all seem to have nothing to do with the demo you provided, it'd probably help a lot if you just isolate the issue in a demo and only talk about a single problem in that particular demo. For example "I am trying to make a line go through each line of text as soon as it hits the center of the screen..." (or whatever)

Link to comment
Share on other sites

Hi @GSAP Helper


Sorry if you got lost, but your tone is a little rude to be honest. I tried my best to explain the issue and wanted to help people understand the issue with enclosed pictures. Don't appreciate being made to feel like a beggar asking for free fixes. I too want to be able to understand the product better and know where I could better amend my design. I don't think responding to peoples honest requests for assistance with such rhetoric is appropriate.

The screen shots and demo both show text scaling after hitting 50% of the viewport so not sure why you'd say they have nothing to do with each other.


All I want to know is how I can get the text div to use the marker div in the minimal demo as a target while in the array? 


and yes I am trying to get the text to scale, and a line go through it when it hits the center of the screen.



Link to comment
Share on other sites

Gosh, I'm very sorry if that came off as rude. Totally didn't mean it that way. I'm kinda baffled, honestly. I was just trying to politely express what's generally in scope and out of scope (we get a TON of out-of-scope questions here and spend many hours every day trying to help people even when it's borderline out-of-scope), and then offer a tip for how we could work together to get you a solid answer. Again, no disrespect or dismissiveness intended. 


I think I've read your post at least 5 times now and I'm having a very difficult time understanding exactly what GSAP-specific question you're asking. I very well may just be suffering from foggy-brain syndrome from lack of sleep. 


It's very common for people to come here and type out a description that makes total sense in their mind because they have a perfect understanding of it, but for the rest of us who don't have that knowledge, it can seem as clear as mud. Try poking around the forums and find another thread where someone describes the effect they want, like "I want to scroll down and have the section move horizontally but then the 3rd section have the 2nd paragraph slide up but stick to the left edge of the screen for 100px or until the red box is dragged to the threshold where it touches the text which by the way is breaking oddly on Android mobile devices - can you offer advice for fixing it?" :) To them, it makes perfect sense and they may get offended when someone says it's not clear. 


I suspect the fundamental problem in your demo is that you're setting up ScrollTriggers on elements but then shifting their container on the y axis substantially which of course messes with all the calculations. Let's say the intersection point for your element and the viewport is 100px down scroll-wise (so start: 100). Great. But if you start scrolling and then a tween grabs the container and starts animating that up by 1000px, well now of course it'll take much less than 100px to intersect with that element. It would be terrible performance-wise if ScrollTrigger had to analyze every tween and try to factor them all in, including eases. Like...TERRIBLE :)


This smells like possibly something that you could solve better by rethinking your engineering or the effect itself - is there a particular reason that you need to animate the container up by 100vh? I mean, you could do all the math to factor that movement in and offset the start/end values but it's not trivial. Are you just trying to make it look like it's scrolling twice as fast as "normal" scroll? 

Link to comment
Share on other sites

Hi @GSAP Helper


Thanks for the apology. I'm fairly exhausted too, been a long week building this thing out and this final issue has had me frustrated. Sorry for my curt response.


Yeah, I have reengineered the solution to simply use a normal timeline and stagger. And have removed the scrolling container as it was causing all the calculation mishaps. I was hoping to better understand the array structure and wanted to see if I could build something using arrays, but the reengineered solution is cleaner and easier to manipulate.


Again sorry for misinterpreting your response




  • Like 1
Link to comment
Share on other sites

No problem. Been there, done that. When you're working crazy hours on a project, feeling behind, stuff isn't working and you reach out for help in a last-ditch effort, it's easy to read unhelpful responses through a dark lens. No worries, really. 


Glad to hear you found a good solution. 


What did you mean by "...better understand the array structure...build something using arrays..."? Are you talking about the boxes.forEach(...) and scale.forEach(...) stuff? In case I wasn't clear, all that was fine - the problem was that you were animating the vertical position of the container element which throws off the start/end calculations for the child ScrollTriggers. 

Link to comment
Share on other sites

Yeah, I figured that animating the container element was throwing off the start/end calcs. Was happy with the array stuff too, however I was struggling to build something which animated the array through the viewport without using the shifting container. :)


The solution I came up with works a treat though :D


Thanks again 

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