Dipscom

Thanks for the input. Always appreciated.

Hey flowen, Your second message here has got me confused. Have you resolved your issue and are now happy with it or do you still need some assistance?

I've left the banne world over a year ago but I still get offered the odd banner contract here and there. I have noticed an increase on GWD as a requirement/tool to be used. To me it's just like the days of Flash, where there was an abundance of designers/animators that would work on banners that had no interest in learning to code. They would get by just fine when it comes down to the everyday banner. The few developers who work in the field would work on the programatic/dynamic ones. And everyone will be happy. Obviously, Doubleclick/Google will want to push their internal software, for whatever reasons they have.

Ditto. What have you tried that did not work previously? Been hiding under a baby. For such small things, they are a handful... And no, my parking spot is definitely NOT up for grabs. My paternity leave (aka money) is coming to an end so, expect me back some point next week.

As Sahil said, if you killAll it will get rid of ALL of your tweens in the entire page. You cannot unkill it. It's not that it is a bad thing, it has its use cases, you just need to know when to use it. It really sounds like the answer is to simply pause the animation on mouse enter and resume on mouse leave. You could overwrite tlEsad but why would you want to do that unless you plan to change its animation? If you are going to re-use the same animation, you are far better off by just pausing it.

You can create a single function that handles your tweens. It will also reduce the number of tweens you have to manage.

I've done plenty of 'that' myself but I started with '_this' because somewhere I had read that one should name one's private variables with a underscore to mark them as private only.

If you use the cycle property, you can define some clever way to select your desired elements using a function and adding a delay to each instead of using the staggerFrom/To own stagger:

So, later on tonight I am doing a 45 minute talk in a MeetUp I take part. The topic: GSAP Crash Course And as a great and prepared guy that I am, I am getting my stuff together now 5 hours prior to the thing. Ops. The plan is: - Short Introduction on GSAP: What is a tweening engine, what GSAP does, GSAP plugins - Live code a simple DOM tween - Live code a simple SVG tween - Live code a simple Canvas tween - Live code a simple timeline - Build a shirne to the CODEGOD (Scratch this one, not enough time in a 45 minute talk) Then, I would like to show a few practical day-to-day example and that where YOU come in. Can I have some suggestions of things I can either steal or setup? Suggestions of simple things Suggestions of medium/advanced things Suggestions of which of @OSUblake's pens to show to make people's head hurt.

I am not aware of any particular slowdown in Safari on iOS but if it really is a browser/OS issue, there will be next to nothing one can do to overcome it. Would you have any simple example that you can share for us to try and replicate?

OH LORD COMMANDER CODEGOD! I HAVE FAILED! NO CONVERTS! PLEASE DO NOT TURN ME INTO A WORM! I have a couple of things I consider eye candy but it's a wall of code... So, no dice there. I know there is plenty of cool stuff that can be done with a line of TweenMax and cycle or the function modifier, hopefully with someone who'll be a bit more prepared than me, it will shine. Anyways, it was alright, small meetup, about half a dozen people. I'm no Sara Drasner but I do think I did not suck. @OSUblake that pen of yours is super useful to a ton of people. It's really what people say "practical" animation. Did not surprise me when it was in the top pens of the year.

So as requested by PointC - Post presentation report. You know the original plan as described at the start of this thread? Out of the window. These were the slides I managed to put together in the hours prior to the talk: https://docs.google.com/presentation/d/1prtPuIM2Gw1Gd5ylTYzfEdUNflWWvnpZ--LdFpSp8fE/edit#slide=id.p Couldn't blow many people's socks off with Blake's stuff because he operates in such a high level that the stuff I showed people didn't quite get why it was baffling or what problem it overcomes. They get really impressed with plain old DrawSVG revealing a stroke but try and explain why the exponential ease is such a cool thing and people go: uh? All in all the feedback was positive, the gang there said it was a nice talk but I don't feel like I have converted anybody. Sorry boss...

Nice one Sahil, but I am now on my way. Can't go over those in the 15 minutes it takes me to drive to the venue. But I will check all of those out and possibly show some. Time to break a leg!

@PointC is there a way for you to transfer ownership of a certain Star Wars pen?

That's great Carl, thank you. I will resist the urge to impersonate you. More because most of the people at the meetup know me and I wouldn't get away introducing myself as Carl Schoof... Will definitely rip half of your presentation off. Still open for further suggestions, people!

Although I have no experience doing that myself, the starting point would be getting yourself a game engine and get familiar with it. Phaser is well known and widely used. Get started with that, build smaller versions of what you want to achiever, sections of your bigger project. Then, start putting those different pieces together. Somewhere along that line, sprinkle some GSAP magice and you'll be golden!

Interesting, I can see the issue you are reporting and can't really think of what is causing this. Maybe @GreenSock himself can shed some light. It could be how text behaves in SVG, it's not quite the same as in the DOM. Hang tight and we'll look into the matter.

Hey mkurdziel, I'm not super experienced with Webpack myself but I wonder if you have gone over the guide in the Docs, specifically the bit that talks about "Tree shaking"? It is possible that when you're bundling up Webpack is throwing it away thinking it is not being used.

Harsh! I may have been sloppy. Fine. But I am sleep deprived. It wasn't me who tried to reach for an element before it was in the DOM. 😛

I get an error when opening this pen in FireFox: 'TypeError: d is null' pointing a the line 24114 of TweenMax .min.js

Nice one, it seems others have already jumped in with some suggestions.

Yep, it does. It hurts until one day, it doesn't. I was struggling with arrow functions myself for a long while. Now I get them. So, now I am struggling with async/await. There's no end to the pain. Let us play this golf with a sandwedge, as we go along we'll pick bits and bobs, make a club. Before you realise it, you'll be swinging for birdies.

I feel you pain bruv!

Would it be a conditional? Sometimes being there, sometimes not? If so, wrap the line into a if() statement. // Somewhere at the start const img2 = document.querySelector("#image2") // Timeline setup const tl = new TimelineMax() tl.to( "image1", 1, { x: 100 } ) if( img2 ) { tl.to( img2, 1, { autoAlpha: 0 } ) } tl.to( "image3", 1, { autoAlpha: 0 } ) Also, better than adding a delay parameter to a tween in a timeline is to use the position parameter: // not wrong .to ("#image2", 0.5, {opacity:0, delay: 3}) // better .to ("#image2", 0.5, {opacity:0}, "+=3")

Hi Devotee007, I'm not following what is it that you mean when you say: "Draw Meet"... Could you explain a bit more? Better yet would be if you made a thread of your own as I feel it will confuse other readers by mixing your question with the original one.