Jump to content
Search Community

replay timeline

greykrav 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

Guys this pen by tim miller is awesome, 

 

How can I do the following: instead of the timeline only playing once, I want to make it run twice, copying it, and connecting the two copied timelines to one bigger timeline. the first time would do a logo reveal to blackness. and the second half of the animation would reveal another image. In my case, I would like to reveal a phone number after the logo.

 

What is the setup to accomplish this? There are 4 images being used in the first animation. I see the first black logo is coming in but then its replaced by the white logo. I was wondering if someone could break down this animation and how to go about tweaking it so instead of a single reveal of just a logo, it would be a double reveal.  first revealing the logo, and then a phone number. 

See the Pen pGNMEL by creativeocean (@creativeocean) on CodePen

Link to comment
Share on other sites

Yep, @creativeocean is a talented designer/animator. He's in these forums, so you could ask him your questions directly. I'd recommend studying the 4 images he used and his animation code so you can understand how they weave together. It's beyond the scope of this forum for us to write a whole tutorial about recreating that effect for a different image or text, but hopefully as you analyze it you'll learn a lot. Maybe just comment-out all the lines and re-introduce one at a time so that you can see how it builds up from the start and what each line is doing. Then maybe swap your text asset in for Tom's logo and see how things go, then tweak as necessary. 

 

Feel free to fork his codepen and show us your attempt and ask us any GSAP-specific questions you may have. And of course I'd recommend asking Tom for his permission to copy his work. :) 

 

Happy tweening!

  • Like 2
Link to comment
Share on other sites

21 hours ago, greykrav said:

I want to make it run twice, copying it, and connecting the two copied timelines to one bigger timeline. 

 

It may not be necessary in this case, but this is an article showing how to use functions to return nested timelines to a master. I highly recommend this powerful technique. 

 

https://css-tricks.com/writing-smarter-animation-code/

 

Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

10 hours ago, GreenSock said:

And of course I'd recommend asking Tom for his permission to copy his work. :) 

 

Hey thanks @PointC and @GreenSock Yes I actually emailed him a while back telling him I want to build/modify his idea and he said he gives his permission, he mentioned that he wont have time to teach me how to do it, but he said I should ask any questions I have about his template on this forum. 

 

I also asked him If i could use the flare that he made, which is one of the assets, and he said:

"please feel free to lift anything that helps your project."

I  told him that I would mention his company on the post on facebook where im going to share the work, giving him credit for the original creation that inspired it. 

 

Anyways here is what Ive done so far. Its obviously not as awesome as his.. but please give me feedback both technical and artistic I would love to hear it, I think its pretty cool, but it still feels a little "off" and I cant put my finger on exactly what it is:

 

See the Pen NmNBXb?editors=1000 by kravmaguy (@kravmaguy) on CodePen

 

 I made the chrome version of the logo in photoshop with a metallic skin, but I noticed his logo doesnt have it, also the phone number I added in the second "Reveal" is just a plain solid color with no metallic skin. 

Anyways what might I do to polish this off? 

 

Edit: I am also curious why I was not able to use t1.duration() as the last parameter for the set of tweens in the second reveal. the console was throwing a reference error. 

 

 

 

 

Link to comment
Share on other sites

Glad you got things working and that you connected with Tom. Great guy. 

 

I'm not in a position right now to do a deep analysis and brainstorm about what else you can do to make it look better, but maybe someone else has some advice. 

 

15 hours ago, greykrav said:

I am also curious why I was not able to use t1.duration() as the last parameter for the set of tweens in the second reveal. the console was throwing a reference error. 

 

 

I'm not sure what you're talking about - I swapped t1.duration() in there and it worked fine. Zero console errors. 

Link to comment
Share on other sites

  • 4 weeks later...

Hey @creativeoceanThanks,

 

I appreciate that you think its a nice adaptation, I kinda just threw it together and got lucky its your creation really.. its not mine. 

So... I didnt share it yet, it could be better..

I was thinking of making the blackness transition into an image so that when the animation is done they are inside of this storage warehouse:

See the Pen mogVJw by kravmaguy (@kravmaguy) on CodePen

 

The transition would be a light bulb flickering on at this circled location : Image lightbulb source

 

There is a period of darkeness after the number reveal,  and that is when I would start the lightbulb animation. and when the light bulb flickers on it lights up the image to its normal state. 

 

I watched these videos that @PointC recommended. Amazing, but I still am not sure what techniques to use for the light. or how to go about putting this together? 

 

How would you make a flickering bulb that then lights up the image? Something like this? neon sign:

See the Pen boGGba by thekenneth (@thekenneth) on CodePen

 

What techniques would you use to put a light in the same spot as in the image and stay there despite a resize. something like this? Image Map plugin

 

I would like to hear what you all think about this? 

 

Link to comment
Share on other sites

12 minutes ago, greykrav said:

How would you make a flickering bulb that then lights up the image? Something like this? neon sign:

 

Here's a demo from a different thread, but shows how the rough ease can be used for flicker. Maybe it'll give you some ideas. Happy tweening.

 

See the Pen LdZZBp by PointC (@PointC) on CodePen

 

  • Like 4
Link to comment
Share on other sites

12 hours ago, greykrav said:

What techniques would you use to put a light in the same spot as in the image and stay there despite a resize?

 

 

I'd just absolutely position my light animation over the appropriate spot of the image, and then handle all the resize/mouse position stuff on a div that contained everything inside.

 

As for light flicker, I love the easing solutions mentioned above! Chances are pretty good I would have over-complicated the solution with a custom flicker() function, like so: 

See the Pen WBQpYp?editors=0010 by creativeocean (@creativeocean) on CodePen

  • Like 1
Link to comment
Share on other sites

  • 4 weeks later...

here is what I did so far how do I make the bulb stick to the spot on the image on resize? 

I thought it would be easier if I had the left and top edges of the image always stick to the left and top edges of the window. But its distorting it too much when the screen gets smaller if im only using one image, I can switch it out to different image sizes based on screen width and keep adjusting the position of the ellipse bulb based on this... 

See the Pen mogVJw by kravmaguy (@kravmaguy) on CodePen

Link to comment
Share on other sites

Personally, I'd avoid mixing CSS animation and JS animation. Maybe it doesn't matter much here, but in more complex/lengthy code situations, it can get confusing as to where you're doing the animating. And GSAP does such a good job with smoothing over browser inconsistencies, I tend to use it for many things that I used to style with CSS.

 

Anyway, back to your specific question: you could set the SVG viewBox to match the dimensions of the image (viewBox="0 0 1600 1200") and set the svg style to position:fixed (or absolute). Also remove all of that unnecessary transform CSS. And don't specify a height on the SVG tag, you only need the viewBox if you want it to scale proportionally like an <img>. All of this will mess up your cx, cy, rx, ry attributes on #ellipse, so you'll have to update those to position it over the light. Lastly, remove the min-width/height CSS on the img so it doesn't scale disproportionally (that'll keep the SVG and image elements behaving the same).

 

Hope that all helps!

  • Like 3
Link to comment
Share on other sites

If it were me, I'd just put the image inside the SVG and the whole thing can size as one element. Maybe something like this:

 

See the Pen WBBjrJ by PointC (@PointC) on CodePen

 

I just made the ellipse red so you can see that it sticks and scales properly. I flickered the whole SVG for demo purposes, but obviously you can animate any elements you like.

 

If you're looking for the image to fill the whole screen, you can just center it and clip the top/bottom or left/right depending on screen size. Here's one approach for that.

 

See the Pen WBBjGy by PointC (@PointC) on CodePen

 

Just my two cents. Hopefully it helps a bit. Happy tweening.

:)

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

ok guys so I have this so far is what I did: 

 

See the Pen Rmzoeg by kravmaguy (@kravmaguy) on CodePen

 

I still think it looks more like a twinkle than a lamp but I dont know.. what you guys think ? 

 

I used @pointC template, but now I think the picture will look too small on mobile so I will do it with his second template, can we elaborate on craigs code, I see he is calling newsize each window resize :

 

<code>

  if (w > h * (16 / 12)) {
    TweenMax.set("#demo", { attr: { width: w, height: w * ratio } });
  } else {
    TweenMax.set("#demo", { attr: { width: h / ratio, height: h } });
  }

</code>

 

Why are we using the above ratios in this first conditional check and then afterwards he goes on and again resets the width and height a second time to the following regardless of the outcome of the conditional:

 

<code>

  var data = svg.getBoundingClientRect();
  TweenMax.set("#demo", { x: w / 2 - data.width / 2 });
  TweenMax.set("#demo", { y: h / 2 - data.height / 2 })

</code>

 

Link to comment
Share on other sites

The ratio is from the SVG viewBox — 1600 x 1200. I'm checking to see if the window is wider than it is tall or taller than wide so we can figure which part to clip. (top/bottom or left/right)

 

I'm not setting the width and height twice. The first part sets the w/h attributes, but the second part sets the x/y position of the SVG so it stays centered on screen. In this case your light fixture is not centered in the image so you may need to make some adjustments to the math for the best results.

 

Happy tweening.

:)

 

 

 

 

  • Like 4
Link to comment
Share on other sites

  • 3 weeks later...

Thanks @PointC for explaining that to me, I did some more work on it a few weeks ago, not yet completed, but its coming along nice, sorry I never posted it ive been so busy, here is what I did: 

See the Pen vqOLpJ?editors=1010 by kravmaguy (@kravmaguy) on CodePen

 

How can I fix the following:

 

1. There is an ugly flash of the image the first time it loads if the animation is not cached in the browser, Id like to hide it so theres only black, user should not see the image before its proper time. How to fix this? 

2. @mikel in his demo, was actually tweening the brightness, his example is more realistic than in the work I did where its just going from completely black to showing the image. How can I achieve this? 

 

Any advice on the above is appreciated.

my homework to follow up: 

 

*Go over the position-parameter video in the documentation, I believe understanding it at an A+ level will help me finish this project. Ive watched the video before and was easily able to finish the challenge afterwards with the man and the car on the platform but that was easier than this. 

In the video its mentioned "to illustrate how the postition parameter works im going to be using my timeline visualizer"... any chance I can also get my hands on this tool?

 

*Clean and Re-Organize the code according to the protocol mentioned by @pointC i.e use functions to create the timelines as mentioned

 

*There is something else I did not understand in this animation; 

<feMergeNode id="MergeNode" in=""/>

vs.

<feMergeNode id="MergeNode" in="SourceGraphic"/>

 

Each one has a different effect, why?

If i wanted to for one part of the timeline use the effect of lightbulb having an emty string for .5 second, and then say switch back to the Sourcegraphic effect  for .5 seconds and then back again to empty string effect how would I do it? 

 

 

 

 

 

Link to comment
Share on other sites

2 hours ago, greykrav said:

1. There is an ugly flash of the image the first time it loads if the animation is not cached in the browser, Id like to hide it so theres only black, user should not see the image before its proper time. How to fix this? 

 

@Jonathan has written about this quite a bit. Here's one of his many posts about loading assets before the timeline starts.

 

2 hours ago, greykrav said:

2. @mikel in his demo, was actually tweening the brightness, his example is more realistic than in the work I did where its just going from completely black to showing the image. How can I achieve this? 

 

You can use a brightness filter instead of opacity. Here's a basic starter example from a different thread.

See the Pen MQvooQ by PointC (@PointC) on CodePen

 

There are also loads of filters available to you.

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter

 

<feComponentTransfer> looks like it could be a lot of fun in your project.

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feComponentTransfer

 

Happy tweening.

:)

 

  • Like 4
Link to comment
Share on other sites

On 6/25/2019 at 1:39 PM, greykrav said:

n the video its mentioned "to illustrate how the postition parameter works im going to be using my timeline visualizer"... any chance I can also get my hands on this tool?

Yes I will look into all you mentioned is excellent. Is a timeline visualizer available to club greensock members? 

Link to comment
Share on other sites

There isn't a timeline visualizer tool nor do I think there are plans for one in the future. See this thread:

If you really want to learn to write modularized code that's super easy to maintain and make quick changes, check out this post by the mighty @Carl that I mentioned above:

https://css-tricks.com/writing-smarter-animation-code/

 

Happy tweening.

:)

 

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