PG1 Posted August 31, 2021 Share Posted August 31, 2021 I'm working on timings in my timeline. Struggling a little. I've seen pens where people have created a visual showing overlap on each tween - is this functionality built in somewhere? If so that would be great, if not any tips on logging out useful info to the console? I'm trying to time different effects overlapping and finding it hard even though I know the code (at least I think I do!!) 1 Link to comment Share on other sites More sharing options...
Cassie Posted August 31, 2021 Share Posted August 31, 2021 I'm not sure quite what you mean by this. If you're working with scrollTrigger you can use markers? Maybe that's what you've seen. You could use callbacks to fire messages to the console, there's no visual overlay though - do you have a minimal demo of what you're trying for me to look at? 1 Link to comment Share on other sites More sharing options...
Solution nico fonseca Posted August 31, 2021 Solution Share Posted August 31, 2021 @Cassie I think @PG1 need something like the pen that you created for the position parameters See the Pen PopXddg by GreenSock (@GreenSock) on CodePen I love this pen 💚 3 Link to comment Share on other sites More sharing options...
mikel Posted August 31, 2021 Share Posted August 31, 2021 Hey PG1, It may well be that I don't understand your intentions properly. If you create a timeline with several positioned tweens, then you will see the result of the positioning directly. The extensive syntax of the options is listed in the DOCS. In addition, a visualization for better understanding. See the Pen PopXddg by GreenSock (@GreenSock) on CodePen Happy positioning ... Mikel 3 Link to comment Share on other sites More sharing options...
Cassie Posted August 31, 2021 Share Posted August 31, 2021 Double positioning pen recommendations! 🥳 1 2 Link to comment Share on other sites More sharing options...
Carl Posted August 31, 2021 Share Posted August 31, 2021 Hi @PG1 Building a robust timeline visualizer would be quite an undertaking. I created a video to explain how the getChildren() method can be used to grab animations from a timeline, get their start times and durations, and then use that info to build a rudimentary visualization Once you start throwing in staggers, nested timelines, and tweens that target multiple elements things get complicated fast. This video is just meant to introduce you to some of the basic concepts. 6 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