cwiens

That is a big factor too, those ad spaces, right and left columns on sites have become blind spots. They have been around for decades now and folks know to ignore them. RDA's although often less attractive appear in unexpected places. Social is video if you want motion so that is huge factor too. Maybe page takeovers? Not sure.

Although I am using Greensock in other ways, almost 100% of my ad requests are RDA and video these days. They have a much higher CTR. I miss making HTML5 GDN ads, telling little stories in a few seconds, maybe it is just the companies I have been working for? Curious if you'all have been experiencing the same.

Just tried it today. It made some weird choices but it shows some promise for sure.

https://greensock.com/docs/v3/GSAP The video here about half way through has some audio overlapping.

I was thinking that too. Thanks for jumping in with your expertise!

Found the solution. Not completely sure why putting it in a function solved it but this created zero errors. var item = $('[aria-label="myElement"] svg') go(); function go() { TweenLite.to(item, 1, {left:"63px"}); }

I was just trying to un-minify the app.min.js file to see where the heck that error is pointing to. It is hard to get through to someone technical enough on the Storyline end to understand questions like that.

Storyline does not give me any control over publishing min files.

I took that out and it no longer throws the above error. Still the push errors though.

Sorry about that. Put the wrong link. This is pointing to an uncompressed TweenMax.js file. https://360.articulate.com/review/content/2c72465e-38f4-44ec-9b5a-e0295c4a6601/review

It works well so I am tempted to just ignore the error. I use GreenSock outside of Storyline all the time and would love to get it working in our eLearning authoring tool, Storyline. The animation tools are weak in Storyline.

Here is the most simplified I can get it. There are just two triggers (storyline coding) that first load the CDN and then tween the box on the stage. You can see for all 3 tweens it throws the PUSH error. https://360.articulate.com/review/content/e71d0732-f5d1-4f16-817f-c7c3a2c5be3d/review var bx = $('[aria-label="box01"] svg') TweenMax.set(bx, {transformPerspective:450}); TweenMax.to(bx, 4, {alpha:1, scale:.8, rotationY:45, ease:Back.easeOut}); TweenMax.to(bx, 4, {delay:4, scale:1, rotationY:-45, ease:Back.easeOut}); TweenMax.to(bx, 4, {delay:4, scale:5, rotationY:0, ease:Back.easeOut});

Thanks for the reply. Yes, I agree, Storyline is making it difficult for sure. Since it is a push error I was wondering if Greensock was tripping on the [] in the variable definition. I will try to strip it down further and point to the uncompressed TweenMax.

Sorry I am not able to create a CodePen for this because it is happening in storyline. I figured out how to use Greensock directly in Storyline by using this code to get the object name using Jquery. var SL1_01 = $('[aria-label="leftIntro"] svg') TweenMax.set(SL1_01, {transformPerspective:450}); TweenMax.to(SL1_01, 4, {alpha:1, scale:.8, rotationY:45, ease:Back.easeOut}); Here is an example in Articulate Review, after you click start the left stripes rotate. https://360.articulate.com/review/content/28f18475-4a3c-4eef-ba4e-37546b6d5c20/review For every tween it throws an error, but still works perfectly. Uncaught TypeError: Cannot read property 'push' of undefined at g.l.render (TweenMax.min.js:14) at Object.o.render (app.min.js:3) at Object._._updateRoot (app.min.js:3) at Object.o.dispatchEvent (app.min.js:3) at e (app.min.js:3) Is it because of the brackets? It does not work without them. The only way to target objects in Storyline is to use the Accessibility feature and name object and include the svg statement at the end. Again this works great but throws the above error with every object we tween. I would love to just ignore the error but would rather solve it :). Thanks for

me too. Great solve. Tried so many other things and I kept getting some larger jpg's loading while the animation had already started. I am using jquery which normally resolves this but I think the extra large jpgs were loading but not fully rendering. Not sure but this approach seems to have fixed it.

Figured it out. It was a scoping issue. I added window. to make the function global and it works. window.pauseTL = function () { tl.pause(); }

My problem is I can not control TweenMax from outside of the Adobe Animate HTML structure. It throws all my GSAP code into an external JS file but then wraps it up in a closed function and it becomes a scoping issue that is hard to resolve. I am going to just hand code for now.

Yes, I have referenced that for sure. Thanks! Really the only reason why I occasionally use Adobe Animate is because you do not have to write any CSS, You can mask things very easily. CSS not that big a deal but MASKING is huge. I am sure I can do similar using parent DIV's. Curt

Hi, this is a very specific issue. I am using Greensock to add HTML5 animations to Storyline (eLearning tool) it will allow you to add web objects to a slide. I have figured out how to communicate between my hand coded GSAP animations and Storyline just fine by targeting the iframe that the web object lives in. Occasionally we use Adobe Animate with GSAP and that is where it breaks. Adobe animate changes the scope of the GSAP code putting it in a closed function: I can fire this function: function controlAnimate(){ alert(); //tl.pause(); } Anything in this function, which is where the GSAP code lives, is not accessible. (function (cjs, an) {... GSAP code is in here. I have tried everything to access the GSAP code with no luck. I know this is a scoping issue I am just not sure how to get around the function with closure. above function firing the alert from Storyline in the animate html. Anything inside (function(... does not work. https://360.articulate.com/review/content/0112d7f3-c73e-475a-adb6-15f30ed9f4bf/review Successful control of hand coded GSAP animation from Storyline: https://360.articulate.com/review/content/5e2693d1-be09-44d8-84ee-eca0dfee96e5/review This is a bit more of an adobe animate question I guess throwing it out there just in case anyone has a clue. DANKE!

I am leary of any tools that add their own code. My banners are clean and free of any proprietary code which makes trouble shooting easy and keeps file sizes at a minimum. I have spelled this out a few times on the forum, not sure if other are using the same approach. I have created a template in photoshop that has all my banners sizes in one doc. Everything is using the CC feature Generate/Image assets. I have one layer group for each size that holds all the banner contents and is exported automatically for the static backup banner. All the assets for the HTML banners have layer names such as: 2017_Q1_ CS_NewYear _DR_HTML5_12-25-2016_to_1-15-2017_P34416_160x600/txt01.svg, we use folders to track everything and then I use generic naming for the layer assets with txt01.svg, product01.png or .jpg. I put my html template in the same folder, all the common code and assets are on a CDN. Any changes I make in photo shop to the assets are automatically updated and all that I have to do is refresh the browser to see the changes. I do not know how it could be any easier. Dragging things around on timelines is laborious in my opinion. This is a pretty rapid work flow for me.

Created some holiday banners this last year with a streaming video background, some gif animations. http://cwiens.com/curt/shutterfly_holiday_2016/2016_Q4_CS_Holiday_DR_HTML5_11-01-2016_to_12-25-2016_P29046_300x600/index.html AOL rejected the video background (file size) but they passed everywhere else.

Thanks guys, yeah I put the thicker stroke on to see if I could use fill:none and animate the stroke. I figured this was too complex. Thanks for the feedback so I can take a different approach!

I am trying to create a "handwriting" type effect here and when I animate this it is way too complex. http://cwiens.com/curt/shutterfly_holiday_2016/test/ I am wondering if anyone knows how I can prep this .svg so it animates more like handwriting.

https://www.richmediagallery.com/detailPage?id=8133 Just found this.

Hmm, I have noticed some performance differences between the two Alpha seems to tween bitmaps more smoothly. Maybe it is my imagination