designer92 Posted March 11, 2021 Share Posted March 11, 2021 Hello guys, I’m trying to animate the h2 (the number 1) in my red section, (line 23 in my codepen demo JS file, and you need to scroll to see the panel appearing) , but it's not working. And also, the number has disappeared, and when I changed xPercent to x and delete the opacity:0, it appears again, but still ni animation. Can someone could tell me why please? Thanks a lot! See the Pen mdOQgJZ by designer92 (@designer92) on CodePen Link to comment Share on other sites More sharing options...
tailbreezy Posted March 11, 2021 Share Posted March 11, 2021 Hello, It is working, though you animation is already completed when you get to see it. Also check your console from time to time, you have several errors that currently aren't affecting much, but could bite you later. You might have to read up on setting up ScrollTrigger. https://greensock.com/docs/v3/Plugins/ScrollTrigger 2 Link to comment Share on other sites More sharing options...
akapowl Posted March 11, 2021 Share Posted March 11, 2021 Hey @designer92 - welcome to the forums. It looks like the other thread you created is related to this, am I right? If so it would be great to keep your questions focussed on one thread instead of creating multiple. As tailbreezy (and Patrick in the other thread) pointed out already; your animation appears to be running - you just don't see it because it happens off-screen. To help you on this, first it would be neccessary to truly understand what it is you want to achieve. How/when do you want the animation to run? Is it supposed to be triggered at some point when the red section is in view? The way you have things set up here, is that the animation for the text in the red section is being played through before you even start the fake horizontal scrolling, so logically you wouldn't be able to see anything being animated once you get to see the red section. 3 Link to comment Share on other sites More sharing options...
designer92 Posted March 11, 2021 Author Share Posted March 11, 2021 Hello! thanks you all for your replies! I'm still new to this. I tried to put a duration of 10 but still can't see the animation. I just want to make a simple animation on the h1, a rotation of 360. Link to comment Share on other sites More sharing options...
tailbreezy Posted March 11, 2021 Share Posted March 11, 2021 Hello, Working with complex scenes will only hinder your progress. Try reading the docs and make demos as simple as possible. Here is a scrub animation of a h1. See the Pen d4175e5d760c18257e66452aa4f3dfff?editors=1010 by dadacoded (@dadacoded) on CodePen 1 Link to comment Share on other sites More sharing options...
designer92 Posted March 11, 2021 Author Share Posted March 11, 2021 thanks tailbreezy! I'll start from simple demos . Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 11, 2021 Share Posted March 11, 2021 The ScrollTrigger demos are also a very helpful resource. In particular there's one that shows how to animate in elements as they're coming into the viewport with fake horizontal scrolling like you have called "Fake horizontal sections animated once in viewport". 2 Link to comment Share on other sites More sharing options...
designer92 Posted March 11, 2021 Author Share Posted March 11, 2021 Thanks you Zack! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now