[mouse event playing another timeline]

On 4/5/2022 at 6:59 PM, PointC said:

Yes, you can control that timeline with a mouse event. Once you create a reference to a tween/timeline you can control it with several methods. play(), pause(), reverse() etc...

 

There's no need to select it after you create it. So in your case:

const ya = gsap.timeline({paused:true});
ya.to(yourTarget, {...});
// then you can control it
ya.play();

Make sense?

 

Happy tweening.

 

 It makes sense now! 😁

So I need to create the reference and/or the timeline before I can start to affect it, yeah? 

[mouse event playing another timeline]

1 hour ago, PointC said:

Hi @Dizablah The Lamot

 

I was having a little trouble following your demo. You have a querySelector for "ya" but no element by that ID. There is however a timeline named "ya" so I was just a little confused abut the desired result. 

Ah, I thought that by creating a timeline named ya (probably need to start naming my timelines a little better) I would be able to run through that timeline on a mouseEvent

 

Thanks so much for the demo. Definitely helps!

And a' tweening I shall go!

 

 

[mouse event playing another timeline]

My goal is to get the yellow arrows, after they are done with their initial timeline, to react to mouseenter and mouseleave. When I try to set AddEventListeners nothing works and if I comment them out, only the first timeline runs. I am pretty sure that I need to call the 2nd timeline from a function when the first timeline runs but that's a different thing. When I comment out the 1st timeline the 2nd timeline runs no problem. But if I uncomment everything out nothing works. 

Am I even approaching this in the right way? I should be able to run a timeline on a mouseEvent yeah? I've taken @carl advice and have tried to make the codepPen as stripped down as I could. Let me know if that's' still too much or not enough. 

TIA, 

Diza

See the Pen zYpZrxG by Dizablah (@Dizablah) on CodePen

[Animation "popping" after completion]

9 minutes ago, Carl said:

Thanks for the demo. With demos it's always good to minimize them as much as possible so that they only show the issue. I had a difficult time understanding what you were describing. 

Sorry about that! Still new around here. I will remember to minimize from now on!

 

9 minutes ago, Carl said:

I didn't notice any lines animating. perhaps you meant a  "a line of text"? but I didn't see anything wrong with the text either.

So the "line" I referring to was that particular line of code. I couldn't, at the moment, figure out how to describe what I was trying to convey.

 

9 minutes ago, Carl said:

I think the issue you are describing is that the filter seems to flash. In this case it is necessary to have a starting filter value in the css. I added brightness(1) so that the animation would have a defined end state. 

Ah yes I see. Wasn't sure if that was a CSS or GSAP thing.

 

9 minutes ago, Carl said:

Does this look better?

This is spot on! Thanks so much! I am guessing that I need to have definitive end values for other objects that I am trying to animate?

Thanks again Carl! You are the best!

[Animation "popping" after completion]

So I am finally starting to get the hang of all this but I have come across a "pop." Where a line is done animating and it pops from it's end to what seems like a reload of the thing that I am animating which in this instance is .talent  - If you look at the CodePen you can tell exactly which one it is. I am sure there is something out there that I need to do but I don't even know if I am asking the right question.

Am I missing something that needs to happen at the end of the animation like a cleanup or something (I'm just talking out of my tukas at the point).

 

Thanks in advance,

Diza

See the Pen zYpZrxG by Dizablah (@Dizablah) on CodePen

[Is there a way to animate singular lines in a paragraph without using splittext?]

This may also be entirely the wrong place to post this. I am just trying to keep my mind GSAP centric

[Is there a way to animate singular lines in a paragraph without using splittext?]

Is there any way to split this paragraph so I can add the current animation to each individual line without using splitText. I know, I know, "just buy it!" And I will. Just wondering how this can be done with out.

 

TIA 
Diz

See the Pen zYpZrxG by Dizablah (@Dizablah) on CodePen

[Sharing HTML5 Banners?]

On 10/5/2016 at 6:40 AM, joe_midi said:

If you have large amounts, you might want to think about continuous integration servers or a simple Git hook.

Where can I find out more about Continuous Integration  SErvers or "simple Git hook?"

[Help with adding EaselJS to my project]

26 minutes ago, OSUblake said:

 

The page isn't outdated. The Easel Plugin is only for use with the EaselJS library to animate Easel objects. It will not work for HTML/SVG elements.

https://www.createjs.com/easeljs

 

The same goes for the PixiPlugin. It can do the same kind of stuff as the EaselPlugin, but again, it's not for HTML/SVG elements. It will only work with Pixi objects.

 

For GSAP to animate a CSS property, it has to be a valid CSS property. There is no such things as a tint, exposure, brightness, etc property in CSS. To do something similar, you would need to use something equivalent to what those canvas libraries are doing, which would be the filter property.

 

Perhaps your confusion is that you might be thinking that GSAP only works with HTML/SVG elements, which is probably what 99% of our users use it for, but it can animate any property of any type of object. GSAP is just a property manipulator. 

 

Most of GSAP's plugins are made specifically for HTML/SVG elements. The only plugins that aren't would be the EaselPlugin and the PixiPlugin.

 

Does that make sense?

 

Yes, lol, this now makes sense! I truly appreciate your patience. Hopefully I can look back at this and be like haha, what a dope I was
Srsly, thanks for helping out. You and @Carl's are gods!

[Help with adding EaselJS to my project]

I guess the thing that was throwing me off what it seemed that the only way to affect exposure and brightness were through the EaselPlugin:
 

Quote

GreenSock’s EaselPlugin exposes convenient properties that aren’t a part of EaselJS’s API like tint, tintAmount, exposure, and brightness for ColorFilter, as well as saturation, hue, contrast, colorize, and colorizeAmount for ColorMatrixFilter. Simply wrap the values that you’d like to tween in an easel: {}

 

Am I srsly missing something glaringly obvious? Is the page outdated or do I have a case of the DumbDumbs and not fully understanding the way that gsap3 handles css properties? EDIT: Or CSS in general?

[Help with adding EaselJS to my project]

3 hours ago, Carl said:

 

Quote

 

If your end goal is just brightness / exposure effects you can do that just with css filters and gsap as @OSUblake suggest

 

If you're serious about getting back into GSAP I'm confident this training will save you loads of time.

 

Unless you have good working knowledge of working with the HTML <canvas> element AND the EaselJs library I don't think it's a good place to start with GSAP. You will do MUCH better working with HTML, CSS and basic SVG elements. 

 

 

Yeah, I am kind of haphazardly trying to relearn this all at the same time! Will look into that LifeTime Subscription!

Thank you so very much. I have much to learn. 😐

 

 

 

[Help with adding EaselJS to my project]

2 hours ago, OSUblake said:

 

That's for Easel objects, but in your demo you are using HTML. Those are two completely different ways of displaying something to screen. As Carl mentioned, if you are trying to learn GSAP, I would not be concerned with using a canvas library at the moment. 

 

I see I have much to learn! Not onlywith GSAP but with HTML/JS/CSS! Thanks so much for the help!

 

[Help with adding EaselJS to my project]

I appreciate the help! But I don't understand, according to this doc https://greensock.com/docs/v3/Plugins/EaselPlugin I should be able to access the brightness and exposure attributes. Which now that I look at it they are probably not the same thing. But when I try to register gsap.registerPlugin(EaselPlugin);  Nothing runs. 

[Help with adding EaselJS to my project]

Hey all! So, I've given up trying to shoehorn GSAP into Adobe Animate. Big step! But now I am having issues with getting easelJS to play nice. See the attached CodePen. I am not sure what or who is fighting with whom or if I am just missing something. I am just getting back into GSAP/HTML/CSS after  some time away so I am pretty sure that I am missing something. The codePen is me testing out if I can tint my image (what I really want is to mess with the brightness and exposure.) and doesn't work. I've tried uploading to codePen, running locally, firing up XAMMP and running a webserver locally and bupkis. the animation makes it past the easel but won't affect the tint. If any one has a moment please show me the error of my ways. I am pretty sure I am missing something that may be second nature to y'all. 

Please and thank you, 

Dez

See the Pen ExbRjqZ by Dizablah (@Dizablah) on CodePen

[Hey y'all, what is your, or what is a good Adobe Animate & GSAP workflow?]

I've been scouring the archives and the web but can't seem to find out a proper workflow using Adobe Animate and GSAP if there is even one or is it even worth it.

I am working off some files that were done by another developer and they seem to have used Adobe Animate for the HTML portion of is and then GSAP for the actual animation. I have been trying to break down how they managed to use both and can't seem to make it work in my head because everything that I pump out of Adobe Animate has a js file that is way overloaded with symbols and such. As I've mentioned elsewhere I am trying to get back into using GSAP so I am rusty as all get out.

 

I may be asking the wrong question so there's that too!

 

Any help would greatly appreciated.

I guess I am missing the link between how to go from Animate to GSAP. Does the GSAP happen within the Animate file? Or is published and then coded.

 

 

[Scrubbing through a timeline with playhead]

@OSUblake If that isn't it then it what I needed. GSDevTools!!!

Trying to search for "a timeline" in the world of GSAP is quite difficult, well, for me at least.

Thanks Again!!!

[Scrubbing through a timeline with playhead]

3 hours ago, Carl said:

Perhaps here

 

 

That is close! but there were a whole lot of animations going on. I think it was the old Why GSAP animation. With greensock man and just a ton of variables.

[GreenSock Snippets for VSCode]

On 2/6/2022 at 3:12 PM, GreenSock said:

There have been many, many releases since that post   The TypeScript definitions are in pretty solid shape at this point. Are you running into any trouble @Dizablah The Lamot? 

 

No not at all! I was just making sure that I was using the latest version!
Thanks for checking! Much appreciated!

[Scrubbing through a timeline with playhead]

Somewhere on this site there was an example of being able to have a "physical" timeline with a playhead and I can't seem to find and my google-fu is not showing anything. Anyone out there able to point me in a direction?

 

TIA, 

Dez

[GreenSock Snippets for VSCode]

On 5/18/2020 at 8:49 AM, ZachSaucier said:

Yes, thanks for posting, Petr.

 

You might also be interested in knowing that the next release of GSAP should have a more complete set of Typescript declarations with JSDocs comments, so users (especially in software like VSCode) will be able to more easily autocomplete and learn about GSAP right in the editor.

When is the next release or has it already been released?

[What IDE does everyone use if any at all?]

Does it have a GSAP library?

[What IDE does everyone use if any at all?]

So as I am getting refamiliarized with GSAP I was wondering what IDE y'all are using? I am right now I am back and forth between ATOM and Codepen. In Codepen I am finding it a hassle when I am uploading assets I have to "reconnect" them in my code but it offers color coding and seems to have some auto complete features. While in ATOM I can't seem to find a package that supports GSAP. So I was wondering what y'alls workflow looks like. You don't have to get into the weeds if you don't want. Just looking for some options.
 

TIA, 

Diza

[Is this dumb? Thinking about trying to animate MULTIPLE paths in a SVG but I feel like it may not be feasible]

I would like to drawOn all the craziness that is going on in the attached file but I'm not sure it's a wise idea. I am just getting reacquainted with GSAP (love it) so my chops are not what they used to be but they are progressing!

So is this a dumb idea or is it just a monumentous undertaking? We're talking  about close to 5000chars and every path is named "d"

 

So, am I dumb, or just uneducated 😁

 

Thanks, 

Diza

 

 

 

[Getting layered PSD files from an InDesign document for banner creation?]

So title pretty much sums it up. And not sure if this is the place to ask but who better! than fellow banner compatriots! Designer/Client is sending me an InDesign document. She used to send AI docs which were a PITA to begin with but this adds another layer of crap. Anyone know of a workflow to get layered PSDs from an InDesign document?

Thanks in advance

[Strategy to build fast Banner Ads with GSAP?]

On 1/4/2022 at 2:57 PM, curtiswiens said:

I have a few different tricks. Usually the bulk of the time for me is spent getting all the assets exported. In Photoshop I use file/generate/image assets. From AI it is a bit more challenging. I organize the AI files layers, creating seperate layers for the things that move, and then name the layers and use a script to export all layers using the layer name as the file name.  jsx file is called MultiExporter. I use the CSS panel in Illustrator to position things, this is also a huge timesaver. I use variables in the CSS too to define background sizes etc... So I only have to put the numbers in once. 

This is an amazing that I should have known about!!!!