Zync

July 6, 2021

Sigh, found the issue. The onEnter Animation had to me a .from animation instead of a .to and make it start at scale 0 and opacity 0. That fixed it. Thanks anyways

July 6, 2021

It's more when switching to 1 filter to another, it just seems to pop in. Try from Frigate to Cruiser. I want to get the old results to scale and fade out and then the new results to fade and scale in.

July 5, 2021

Hi again all,

Supplied a codepen this time. Trying to get the onEnter and onLeave animations to work in a Flip filter animation. But the assets seem to keep popping in and out but only works sometimes. Been trying to debug for a few hours now but think I've hit a wall.

See the Pen OJmMNLB by zync09 (@zync09) on CodePen

July 4, 2021

For anyone coming back to this later on. Finally figured out Vue single file components on Codepen.

Here is the sample with GSAP, GSAP Flip + Vue and Tailwind.

See the Pen WNjQMGN by zync09 (@zync09) on CodePen

July 4, 2021

7 hours ago, Trapti said:

It is difficult to see problem this way. It would be helpful if you can create a demo in Codepen.

this line does not seem right to me, you are targeting all the box inside the group it should be ".group .box".

Flip.getState('.group, .box');

I would have created a codepen but unfortunately I don't really know how to create one with Vue single file components. Still getting the grasp of that. Sorry

July 4, 2021

Thank you OSUblake,

I knew I was missing something completely. Thanks for your help.

July 3, 2021

Hi all,

Been trying to get a Vue with Tailwind implementation of the Flex Box example going for a couple of hours now but can't seem to make any headway on it. I must be missing something really simple but it just won't animate the flipping even though I'm just toggling 1 class. Any help would be greatly appreciated. Code is below.

</div>

</template>

import gsap from 'gsap';

import { Flip } from "gsap/Flip";

export default {

name: 'Home',

data() {

return {

col_mode: false,

state: null

}

},

mounted () {

gsap.registerPlugin(Flip);

},

methods: {

toggleDirection() {

this.state = Flip.getState('.group, .box');

this.col_mode = !this.col_mode

Flip.to(this.state, {

absolute: true,

duration: 1,

stagger: .2

})

}

},

}

</script>

October 12, 2017

hey ya mate. Not sure if this is too late. But you can try tunnelling up from your child swf.

trace(this.parent)

trace(this.parent.parent)

trace(this.parent.parent.parent)

See what hits.

Also try adding Monster Debugger to your child swf and run the companion app to see what it outputs. Might be easier than blind tracing.

http://demonsters.nl/nl/projects/monsterdebugger/

August 6, 2015

I too was frustrated by Edge, coming from Flash. I just wanted to be able to load subSWFs.

Until I saw the syntax for loading iFrames in Edge, which allowed me to display just about anything you find on the web like sliders and slide shows.

sym.$("Box").html("<iframe width='770' height='360' src='http://**********/flipbook/' scrolling='no' border='0' border='no' frameBorder='0'></iframe>");

My favorite was a parallax slider I modified to fit a high impact pushdown.

Maybe HTML5 advertising should not try to be so much about animation for the sake of animation, and more about building interactive advertising. You will have rich media metrics if you use the DCRM HTML5 templates for Studio.

Even without using GWD you can edit and reuse at least some of the Doubleclick GWD templates in an HTML editor.

I like this one. The bottom has swipeable images you can just replace.

http://motifcdn2.doubleclick.net/EMEA/dc_templates/live/preview/gwd/DCRM_Inpage_banner_with_Swipable_Gallery/DCRM_HTML5_inPage_Banner_with_Swipeable_Gallery.html

Whatever you choose to do, you have to be able to offer tracking. Any GSAP coding should happen within a vendor like Doubleclick's templates. Better to know early if they aren't going to play well together.

How do you integrate Greensock with Edge Animate? I like the edge timeline but I just find greensock much more flexible for making changes quickly, like changing the timing of everything is a lifesaver, I'll never go back to timeline just for that feature alone.

August 6, 2015

Hi Zync,

Have you tried Google Web Designer? It creates the CSS in the main HTML as you build the layout. You could publish it and then strip out all the code you don't need. And then use GSAP to animate.

Hi Joe_midi,

No I haven't really heard or tried Google Web Designer much. If it does what you say and just creates css with html and does the css for you that would be amazing. How does it fare with video? Will definitely look into that now.

August 5, 2015

Hi Somnamblst,

I've tried Adobe Edge before but the way it selects elements seems really obscure to me. Wish I could use it just for layout and then animate with greensock. Is that possible without including the Edge bloat scripts?

I'm actually using Flash still and the Canvas document to make ads at the moment. And while it's working well for layout, just wondering if there was a quicker way out there. It's great for positioning things quickly and then having all your movieclips accessible with exportRoot. Theres a little bit of refactoring, stitching it up with a network like Sizmek but so far so good. I don't think it will work for all ad types though like expandables.

And thanks ihatetomatoes, was looking for a more visual way of placing elements though without script though. To me that seems to be the biggest bottleneck in the entire pipeline, manually positioning things with css. Not to mention I have a few non-codey people in the office here who want to tweak layout things to an mind numbing extent.

August 4, 2015

Hi All,

Just wondering if anyone has any good tips or know of any good apps either online or offline that can help with the layout of webbanners which can them be palmed off to animating with greensock. Flash did a great job with layout and then animating with greensock in a sweet little package but times are changing.

Just wondering what people use to layout their banners with now?

March 9, 2014

YOu can do this somewhat at dev time, not at runtime as far as I'm aware of though.

Save this into a JSFL file, and do a run command from within flash with a shape selected. Your milage may vary but it should get you the points of an object.

var vertices = fl.getDocumentDOM().selection[0].vertices;

//getting the points and trace them
for(var i = 0; i < vertices.length; ++i)
{
	fl.trace(vertices[i].x + "," + vertices[i].y);
}

February 27, 2014

Hey mate,

Directly loading a PDF is not possible in Flash for a multitude of reasons. There are some other options however if you only working with Flash.

PDF2SWF:

http://www.swftools.org/

Converts a PDF document to SWF pages which you can use in oyur app. Havn't tried this one personally but you might get some milage out of it.

If however you are using Adobe AIR, you can load your PDF into a HTML Container and then assuming the system that is running your app has adobe reader installed. It should render the PDF.

var request:URLRequest = new URLRequest("mydoc.pdf");
pdf = new HTMLLoader();
pdf.load(request);
container.addChild(pdf);

February 27, 2014

Dang it, bet me to it while I was typing Jack:P

February 27, 2014

Hey mate,

Something like this should work for you:

public class Main extends MovieClip 
	{
		private var lm:LoaderMax;
		
		public function Main():void 
		{
			//Setup Loadermax instance and set a onChildComplete event for when a 
			lm = new LoaderMax( { onChildComplete:childDone } )
			
			//Add files to Loadermax Queue
			lm.append(new SWFLoader("myFile1.swf", { container:this } ));
			lm.append(new SWFLoader("myFile2.swf", { container:this } ));
			lm.append(new SWFLoader("myFile3.swf", { container:this } ));
			lm.append(new SWFLoader("myFile4.swf", { container:this } ));
			
			//Of course load the queue
			lm.load();
		}
		
		private function childDone(e:LoaderEvent):void 
		{
			//pause the loading
			lm.pause();
			//Wait for 2 sec then resume loading
			TweenLite.delayedCall(2, resumeLoad);
			trace("done")
		}
		
		private function resumeLoad():void
		{
			lm.resume()
		}
	}

February 18, 2014

Yeah best pipeline I've found using Adobe Creative Cloud is to render the video from Flash CC (even if it's scripted, it works well now and they updated Flash CS6 to do the same) then bring the video into Adobe Media Encoder CC and select Animated Gif from the presets. Crop, cut and edit and render from there.

January 16, 2014

Just kidding, we're going to need to see some actual code to help you diagnose the problem not just the error output

January 16, 2014

Hey ya mate,

Theres ya problem:

undefined

January 16, 2014

G'day mate,

There might be an easier way but this should work for you:

import com.greensock.TweenLite;

var f:TextFormat = new TextFormat();

//Change the letterspacing
TweenLite.to(f,5,{letterSpacing:6, onUpdate:applyKern})

//Dont forget to apply the kern on update
function applyKern()
{
	myTextField.setTextFormat(f);
}

kernIt.zip

January 16, 2014

Hey ya mate,

Don't really need Timeline Max for this. This should work for you too.

import com.greensock.TweenLite;

moveIt()
function moveIt()
{
	TweenLite.to(box1,1,{rotation:"+=15"})
	TweenLite.to(box2,1,{rotation:"-=15", delay:1, onComplete:function(){moveIt()}})
}

rotate.zip

January 13, 2014

Don't know where else to put this post (Learning materials forums maybe, if we had one?) But thank you guys! Just checked my email this morning and wanted to say a huge Kudos for listening to the feedback and making the seminar your doing in New York available online for us all.

If you got no idea what I'm talking about, today Greensock email :-P :

Upcoming events

Our very own Carl Schooff will be leading a free 2-hour seminar about GSAP in NYC on January 28. Due to popular demand, he'll also be doing a similar presentation online (for those who simply can't make it to NYC) February 12.

January 6, 2014

Hey mate,

Do you know what phase the memory leak occurs? Like before loading the list of file, after loading, before playing the first video, after playing a couple of videos. Maybe setup a few road blocks and test gradually?

January 6, 2014

G'day mate,

Unless I'm mistaken, I think LoaderMax is just for including other loaders and then loading them in that way. Instead of using a loaderMax instance, if all your are doing is loading in SWF's you could just use a SWFLoader and change and load the url that way.

Something along the lines of this should work:

//First create an instance of your SWF Loader
			var swf:SWFLoader = new SWFLoader("", { container:yourSWFContainer } );
			
			//Then in your case statements set the url
			swf.url = "pathToYourSWF.swf";
			
			//Then after your case statement load the swf content
			swf.load();

December 9, 2013

Hey ya mate,

Took a look at your files but yeah like I said its more a logic / organisation problem than a tweening one. Here's an updated sample using your assets and a single doucment class. Code is pretty much the same as before too. Maybe that works for ya.

mapShowHide.zip

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by Zync