Chris Prieto

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.

I am also a noob but perhaps ScrollMagic to the rescue?

hah I did not know my searches were visible. I was mid replying and was like well lemme see if I can figure this out (nope!). It is much appreciated.

oh man, I feel so dense ? Well, thank you! I was well into researching a bunch of things that were not this lol it is literally flickity first and tweens second ?‍♂️

After weighing out all the pros and cons of using something pre-made or making my own pure GSAP slider I decided to try and force GSAP and Flickity to work together. I was surprised I got this working at all. The original codepen I forked was morphing SVG shapes so it may not be the prettiest code in the world. Now that I have something working, I am attempting to add an intro animation to build out the slider itself but when I try and tween the buttons/pager dots nothing happens. I suspect it is because they are added on page load via flickity. So I am wondering if there is a way for GSAP to animate stuff that is added when page loads? Hopefully that makes sense.

That is actually using GSAP. If you view the source on the example you will see a TweenMax in there. The title of the example also has a lil GSAP indicator/tag

ignore me, I missed this important nugget while looking thru SVG gotchas:

So I am crashing and burning my way thru this example of svg text being revealed with a mask. While I seem to have the reveal animating good enough it seems my white text being revealed is having the opacity lowered (?) and shows as gray text once masked. Not sure if that is an actual issue or me just missing something obvious. I am new to using SVG for this type of thing so I am curious if this is even the correct way to go about it.

After spending a bit of time crashing and burning with the callbacks and such. I added another section to my example and the preloader stopped glitching. Slowly backing away from this one but just wanted to follow up in the case I am not the only one dealing with this small but annoying hardly existent issue

I don't have the chops to make my own plugin unfortunately but it's good to know that is an option. I realize the post is a bit dated, but something like this (generally speaking)? I will begin to dig into callbacks for the time being, Thanks again!

Thanks @GreenSock! My apologies for delay in reply, I got pulled down the rabbit hole trying to answer my own questions unsuccessfully. I think I am picking up what you are putting down (to an extent). Now that you mention it I recall reading elsewhere around here about using the className in tweens so thank you for the reminder. It seems I also need to get a better grip on the timeline. That said I was able to copy what you did in my text based preloader pen and it worked. But it doesn't seem to help out with the circle svg preloader as it still pauses on the out animation (https://codepen.io/ionz149/full/BeYOrr). If I comment out the className tweens it is smooth however everything relying on those classes stops working (expected) So I am now wondering what is the preferred way to add/remove classes within a timeline like I am trying to do? I tried looking this up but am a bit more confused than when I started

Hello again I have made the pen in question based on this ihatetomatoes article, which transitions from preloader to loaded content smoothly, 10/10 times (https://ihatetomatoes.net/demos/scrollmagic-templates/scrollmagic-template-04/) Somewhere along the process of dumbing down my codepen, the preloader animation transitioning from preloader to loaded content (once preloader hits 100%) is no longer smooth and kind of stutters/pauses on the way out. It will actually be smooth 2/10 but most of the time it paused slightly. I was hoping one of you smarter folks could spot something wrong or missing in my attempts. It also happens in a text based one that is more like Petr's example (https://codepen.io/ionz149/full/mYqxPE) so I am fairly certain I am doing something wrong. **The issue is noticeable when pen is fullscreen, harder to see in the embedded smaller pen

Oh nice! Thanks so much @Dipscom and @Visual-Q. It never once occurred to me that the scrollmagic and timelines can be separated like that. I recently had an issue that was more than likely related to this as well. I also forgot all about the clearProps which to be honest I've only used once or twice in tutorials. Deff helps to see both approaches.

Thanks for taking a peek! I'm still getting my grips on Code Pen so when I first posted this pen it was actually just the tweens/timelines defined in each media query. When I changed it to how it is now I overwrote that and it is now behaving a bit better however as you noted the autoAlphas are getting stuck. While I have no way of proving it to be true I too share the hunch that the scenes are fighting each other. I tried it with just one media query and both sections in each breakpoint, yields identical results (https://codepen.io/ionz149/pen/wbgGJN) I also tried one using not using the Media Query Watcher, which seems to be working (https://codepen.io/ionz149/pen/ZNLbmo) So at least I know it is possible and it seems it is more than likely something I am doing wrong with the media query watchers/scrollmagic. However I am still very interested in knowing how to set this up the correctly using the media query watcher.

Hah! Totally understandable and I did mention that in my post but figured it was worth a shot since I learned about the MediaQueryWatcher stuffs here. Kind of hoping I was doing something obviously wrong. Anyways thanks for bothering to look I could be going about it all wrong but I am trying to come up with a reliable approach to manage separate animations of same elements for desktop and mobile devices. Expected behavior would be: screens wider than 640: blue section has text coming in from sides, orange section has text coming from bottom screens 640 or less: blue section has text coming in from bottom, orange section has text coming in from sides Which is kiiiind of working at first glance. The issue is if I resize while blue section is on screen when I scroll down to the orange section it will be blank. Doesn't always happen the first time. Resizing it a few times will eventually leave both sections blank, or just the image will show, some times the image and title. It is rather consistently inconsistent and doesn't error out in the console for me.

So I tried really hard to not start another thread about responsive tweening but that is ultimately where I started. With the help of Blake's codepen's I think I wrapped my noodle around it to an extent by forking his MediaQueryWatcher codepen's (https://codepen.io/ionz149/pen/VOaBZv, https://codepen.io/ionz149/pen/VOaBZv). Since those worked I thought I would take a stab at integrating it with ScrollMagic to see if it would work. I got it working in first ScrollMagic scene but once I added the second MediaWatcher to the second scene only the second one works and the first one stopped working. I am sort of muddling my way thru this so I might be going about it all wrong but also kind of hoping it is something stupid being overlooked due to my lack of javascript expertise. I also realize this is not a ScrollMagic support forum but I figured somebody might be able to point me in the right direction.

Yes! Thank you Carl, that totally was it! My apologies as I meant to paste HTML and forgot to do it. I also tried to set up a codepen when I submitted and got the notice but I was not able to get it working. But thank you for the quick fix and I will work on trying to wrap my mind around codepen for future issues I may encounter.

I've made it plenty far using GreenSock with my limited js/jquery knowledge so it's been a fun and fulfilling learning experience. In my search for a solution I found a post on here that got me this far but I fear I am missing something ? That said I find myself struggling with what I hope is something simple for a more knowledgable GreenSocker. The loop I am stuck on is below. My hope is to split the text on '.services-wrap li p' which i was previously adding to timeline with 'element.children[4]' but once I tried to split that text things got a lil complicated. I confirmed that SplitText works outside the loop so I am convinced I am doing something wrong even tho the variables make sense to me. var $serviceWrap = $('.services-wrap li'); $serviceWrap.each(function(i, element){ var serviceBTl = new TimelineMax({delay:i*.2}), servicePSplit = $(this).find('.services-wrap li p'), serviceSplit = new SplitText(servicePSplit, {type:"lines"}), serviceChars = serviceSplit.lines; serviceBTl .from(element.children[0], .2, {autoAlpha:0}) .from(element.children[2], .2, {autoAlpha:0, y: '50%'}) .from(element.children[3], .2, {x: '-110%'}) .staggerFrom(serviceChars, 1, {y:'50px', autoAlpha:0, ease:Power3.easeOut}, 0.1) ; serviceTl.add(serviceBTl, 1); });