Salakala

Great insights and nice effect! ? Unfortunately im looking for a solution in Adobe Animate and Greensock. Animate uses canvas as final output and i would like to animate Animate symbols with greensock. Thannks to all.

Whoa... a blizzard Nice. But it looks to be using pixie. Id avoid going outside Animate and greensock. And keep it simple. Than you for the info!

Hi! This has been a recurring question for me every winter season of making banners and I have never found a good working solution. I have AnimateCC (Canvas)+ Greensock workflow and I need to animate some snow falling in the background during the banner. A simple setup with 2-3 different starting symbols for snow and a way to place them on the canvas randomly and moving them randomly from top to bottom inside a timeline. I have a sturdy knowledge how to use Gsap and timelines in banner workflows but other then that I'm pretty useless with code. Plenty of snow tutorials available in GSAP but none in Animate CC using canvas and GSAP. So the question is: how do you randomly duplicate a movie clip and make each movie clip follow a random path. Any hints would be apreciated. Attached is a simple banner template that shows the timeline control that I use and includes text and snow symbols. snowbanner.fla

Thank you for your anwser. Please elaborate. How would fromTo resolve the situation. The idea is that if I make banners then "tl2" is doing something (like scaling an image slowly in thebackground) while "tl" contains text and other animations that are mostly in sequence. In some cases whats happening in "tl" needs to affect "tl2" action (like stop the image from scaling and making it to scale to 0. Tanks

(In Animate CC) I have been at this for a while but cant figure out how to restart an animation from the beginning values when I use an overwrite. A basic example. On "tl2" timeline a symbol scales slowly from 0 to 100. After 3 seconds "tl" timeline overwrites and scales this symbol back to 0. Both of these timelines are nested inside a "maintl" that runs on a endless loop. In this case when "maintl" restarts the "tl2" symbol is not at 0 scale but at where it was cleared and scaled back to 0 by "tl". How to restart the "maintl" so that scaling starts again from 0. var maintl = gsap.timeline({repeat:-1}); var tl = gsap.timeline({repeat:0}); var tl2 = gsap.timeline({repeat:0}); //tl1 tl.to([this.ring],{duration:0.5, scale:0, ease:"none", overwrite:"auto"},"+=3"); tl2.to([this.ring],{duration:6, scale:2.5, ease:"none"},"+=0"); //maintl maintl.add(tl,0)//starts at time of 0 .add(tl2,0) Thanks in advance.

Could you elaborate what might have been causing Adwords to block the CDN provided url(4th party call error). Perhaps this is completly unrelated but the 3.2.4 version of gsap contains a url to greensocks site. The older version that works for me does not have that url in the code (2.1.2).

Hi! As I understand they (Google) just uploaded new versions of GSAP to the Google CDN. This is fine but I dont think thats where the error is. The error is probably somewhere with Adwords system or Doubleclick. (i think in my case it was a Adwords banner).

Indeed. And it validates the banner as "ok". Fails when it's uploaded to "Adwords".

I have not had the chance. The next campaign that asks for GDN banners I will slip one gsap 3.1.0 version in. See if it makes a difference. Though it should not matter as the rejection was weirdly for the domain not a specific javascript file.

I don't have direct discussion with Google however the media company reached out to google tech support and the answer from them was that the error has something to do with the landing page that they had entered. Media changed the landing page in adwords system but the result was the same. Then media removed the gsap and createJS links after wich the banner was accepted by the system (although it did not animate offcourse anymore, sic). I went back to gsap 2 but have not had the chance to test. Right now we sent them gif versions as the campaign is at a deadline. Other banners (ones that did not use adwords but were also done with gsap3) worked fine. No errors. Probably missing something obvious here. Template used to publish below. <!DOCTYPE html> <!-- GOOGLE AD DISPLAY NETWORK TEMPLATE v.1 /S.K/ 03.01.2020 --> <html> <head> <meta charset="UTF-8"> <meta name="authoring-tool" content="$VERSION"> <meta name="ad.size" content="width=$WT,height=$HT"> <title>$TITLE</title> <!-- write your code here --> <style> html, body{ margin: 0; padding: 0; background-color: #FFFFFF; } #canvas{ position: absolute; top: 0px; left: 0px; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0); cursor: pointer; } /*#border{ position: absolute; left: 0px; top: 0px; width: calc($WTpx - 2px); height: calc($HTpx - 2px); border: 1px solid #000000; pointer-events: none; }*/ </style> $CENTER_STYLE <script type="text/javascript" src="https://s0.2mdn.net/ads/studio/cached_libs/createjs_2019.11.15_min.js"></script> <script type="text/javascript" src="https://s0.2mdn.net/ads/studio/cached_libs/gsap_3.0.1_min.js"></script> $ANIMATE_CC_SCRIPTS $SCRIPT_START var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation; function init() { canvas = document.getElementById("$CANVAS_ID"); anim_container = document.getElementById("$ANIM_CONTAINER_ID"); dom_overlay_container = document.getElementById("dom_overlay_container"); $CREATE_LOADER $LOAD_MANIFEST $PRELOAD_ASSETS } $HANDLE_FILE_LOAD_START $HANDLE_FILE_LOAD_BODY $HANDLE_FILE_LOAD_END $HANDLE_COMPLETE_START //This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage. $CREATE_STAGE //Registers the "tick" event listener. $START_ANIMATION //Code to support hidpi screens and responsive scaling. $RESP_HIDPI $HANDLE_COMPLETE_END $PLAYSOUND $SCRIPT_END <!-- write your code here --> </head> <body onload="init();" style="margin:0px;"> <div id="$ANIM_CONTAINER_ID" style="background-color:$BG; width:$WTpx; height:$HTpx"> <canvas id="$CANVAS_ID" width="$WT" height="$HT" style="position: absolute; display: $CANVAS_DISP; background-color:$BG;"></canvas> <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:$WTpx; height:$HTpx; position: absolute; left: 0px; top: 0px; display: $CANVAS_DISP;"> </div> </div> $PRELOADER_DIV </body> </html>

The validator actually is fine (works there, no errors). The error ocurred when I sent the banner to the media agency and they wanted to put the campaign online. Google Ad Studio or what ever they are using for Adwords rejected the banner with the error code : "Invalid fourth party call". And shows its own CDNs domain (https://s0.2mdn.net) as the offending url.

Hi! Google keeps rejecting Animate CC banners made with greensock 3 .01. Reason of rejection is that there are external resources loaded. However I use the greensock and createjs from Googles own CDN. <script type="text/javascript" src="https://s0.2mdn.net/ads/studio/cached_libs/createjs_2019.11.15_min.js"></script> <script type="text/javascript" src="https://s0.2mdn.net/ads/studio/cached_libs/gsap_3.0.1_min.js"></script> Has anyone come across this ?

Thank you for the input

Hi! Is it possible to animate a pendulum slowing down like effect with greensock's yoyo and repeat function where each repeat cycle rotates the pendulum less and less. Staggering has the cycle function for this.

Is the name of this movie clip that that things are wrapped in known. Can it be targeted by code?