Jump to content
Search Community

Example of GSAP based "Timeline"

Chris Prieto test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Does anybody know of any cool gsap timelines showing the passage of time visually? ie: a company history or a process of some kind, very basic example (https://www.w3schools.com/howto/howto_css_timeline.asp)

 

I apologize for the vague title and generally stupid question but after searching and only finding results relating to actual timeline functionality I figured I would ask in the case that some of you have run across some memorable examples over the years.

Link to comment
Share on other sites

One recent post on here about something similar/related is this post:

 

If you want it to trigger on scroll you could look at @PointC's new post on using GSAP with ScrollMagic (but it's not necessary to use ScrollMagic to do this - in fact GSAP may have its own way of doing it soon ;)).

 

Maybe the guys who have been around the forums longer have other similar examples.

 

If you threw together a demo of something you're wanting to create the guys here are often eager to help out :) 

  • Like 5
Link to comment
Share on other sites

4 minutes ago, ZachSaucier said:

If you threw together a demo of something you're wanting to create the guys here are often eager to help out :) 

 

Thanks Zach! That link is great. I am currently just kicking around ideas and looking for inspiration and will prolly end up back here with some mangled codepens once I get going :D

Link to comment
Share on other sites

At the moment I can't think of any recent demos or threads about that. Maybe look around codepen for stuff like "company history" or "animated calendars" etc...

 

The things you find may not be built with GSAP, but maybe they'll give you some ideas. If you find something built with CSS keyframes we'll show you how to throw those out and animate it properly with GSAP. ;)

 

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

5 hours ago, Chris Prieto said:

I am currently just kicking around ideas and looking for inspiration and will prolly end up back here with some mangled codepens once I get going :D

 

What kind of timeline are you trying to do? Like an interactive one, or one you just scroll through?

 

I think GreenSock's Twitter is a good place for inspiration. 

https://twitter.com/greensock

 

 

5 hours ago, ZachSaucier said:

If you want it to trigger on scroll you could look at @PointC's new post on using GSAP with ScrollMagic (but it's not necessary to use ScrollMagic to do this - in fact GSAP may have its own way of doing it soon ;)).

 

That's pretty easy to do with a standard timeline. Just replace time/duration values with pixel values, listen for scroll events, and BOOM! You now have MagicScroll ™.

 

See the Pen bOGMaG by osublake (@osublake) on CodePen

 

 

  • Like 3
  • Haha 1
Link to comment
Share on other sites

13 hours ago, OSUblake said:

 

What kind of timeline are you trying to do? Like an interactive one, or one you just scroll through?

 

@OSUblake A vertical scroller that starts at 'Step 1' and goes thru however many more 'steps'. Jump links/indicator dots on the side that get an active class per current 'step' being shown.

 

I forked a codepen I found with a cool jquery/gsap based vertical carousel of sorts and was able to tweak it to work like I need but the jquery is throwing me for a loop . I cant figure out what the array index numbers are for. I made what I wanted happen but I could not write it myself as I don't get what it's doing. 

 

See the Pen BgMvav by ionz149 (@ionz149) on CodePen

 

It is a bit of work (for me) as I would need to remove the jquery that is currently scrolling it, tie the animation to mouse scrolling (via scrollmagic or gsap goodness) and add the ability for the indicator dots to get active class and trigger the animation to show whatever 'step' is clicked.

That said after posting this I am continuing to dig thru tutorials I've done and various codepens I have saved to get try and get these going on my own. I feel like I've done a little of all of these things but just not all at once ?

Link to comment
Share on other sites

48 minutes ago, PointC said:

Maybe this will help. It has drag, nav dot, arrow and mousewheel controls. No jQuery involved. ;)

 

Nice! I was looking at your horizontal one actually as I wasn't aware of this vertical one. This thing is a beast and a lil over my head but I shall commence the crashing and burning!

  • Like 1
Link to comment
Share on other sites

44 minutes ago, Chris Prieto said:

This thing is a beast and a lil over my head

 

There's no way I could have written that demo a few years ago. I didn't know diddly-squat until I started hanging around all these other GreenSock geniuses. Just keep tearing stuff apart and hanging around here. Things will just start clicking and you'll have lots of 'aha' moments. Just don't get too good or you'll end up as a forum Moderator and then you can never leave. ?

 

In case you haven't seen it or you need a sleeping pill, you can read my Superhero origin story. (Not affiliated with the Marvel Universe)

Happy tweening.

  • Like 1
Link to comment
Share on other sites

@OSUblake Ha! So that's where you were hiding that. I remembered you posting that picture and I was actually searching the forum for it, but couldn't seem to find it. I had to grab it from an external source. I didn't realize it was three years ago. Time flies in the GreenSock neighborhood.

 

Maybe we need to add the ability to put tags on a per-post basis in addition to threads so I can more easily find your wise words. That way we can have exclusive tags for you like "Blake's Book Bin", "you might not need ScrollMagic", "my canvas can beat up your SVG", etc. :D

  • Like 1
Link to comment
Share on other sites

After much brainstorming I have come up with something inspired by Mikel's codepen I found. It is so perfect and simple but still a little confusing since I am not using an svg. Differences are that it is not all one big svg and it is horizontal instead of vertical. The timing of the text/dots/svg noodle is something I am after.

 

See the Pen QREjpr by mikeK (@mikeK) on CodePen

 

I got something I like in place however when it came time to adjust the timing of everything I started messing things up so I kept trying to add new timelines/scenes to no avail. I am using ScrollMagic to control the scrolling via a timeline so i can scroll down but move content on screen to the left. I am really not sure why it's giving me so much grief when I tweak the timing of the timelines.

 

I have reduced my issue to the bare minimum (no bulbs lit up). Right now the animation starts the second you scroll and the appearing of the steps text and svg noodle progress aren't really synced up.

 

I would like for the animation to allow the user to scroll for a smidge before the first step fades in and the noodle starts moving towards the next step. I would also like for the step text to appear when the svg noodle is almost above the step text. There is also a red bar of text that I am trying to do a horizontal parallax type of thing on, but I have stared at it for so long I can no longer tell if it is moving or not or if it stops at some point haha

 

Any help, hints,  thoughts, pens, corrections, criticisms, etc will be very much appreciated and my sincerest apologies if this thing make ya wanna stab your eyeballs with dull pencils.

 

See the Pen EBqzwK by ionz149 (@ionz149) on CodePen

 

======

 

@PointC story read and I shall stay persistent :D

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