cwiens

At work we are making the move from all flash to all "html5" for our display banners. This is a huge and welcome change as I have been wanting to spend more time in GSAP JS and move away from flash. It looks like the display industry is planning on making the switch in Sept of this year. Lots of designers with no coding background seem to be jumping into Adobe Edge. I plan on sticking with GASP . The only thing that I need to figure out is dynamic content. We use XML to change our offers i.e. 50% / 30% off etc...on our flash banners. Any examples of doing this in HTML5 or direction from the community would be appreciated.

Does anyone have an example of referencing an external .svg file as a mask?

Turns out I do not need the scrubber for this project. Its coming out great. All errors fixed…Finally getting my feet wet with GSAP after having used the Flash classes for years.

Thanks, its all just testing yes. I have since changed all the links to local .js

I am building this timeline animation in GSAP I need the handle to be mobile friendly. There seem to be a lot of .js solutions out there. Can anyone recommend the easiest way to do this? I am green sock club member is there a plugin I can use? http://cwiens.com/curt/shutterfly_home_decor_design_a_wall/index_postion.html Thanks, Curt

I am ending up using TweenLite with animated gif. With the animated gif I am able to control the shine a lot better. I using layers and a mask in photoshop to get the correct shine effect and TweenLite to animate. http://cwiens.com/curt/shutterfly_metallic_foil_card_study/card/

This is awesome, thanks everyone. Jumping into this today...

I am slowly but surely getting requests for JS versions of my Greensock AS animations. A lot is straight forward going from AS to JS but some not so much. I am trying to create a JS version of this animation http://cwiens.com/curt/shutterfly_mothersday_2014/playground/cards_test.html. Its to show the "metallic" features of the card. In Flash I did this in 20 min because I knew how I would do it before I even started due largely to the awesomeness of greensock. I know how to create the 3d card effect in JS but not sure how to create the shine. In Flash I masked out the area on the card that I wanted to shine and tweened a gradient filled shape with the layer set to multiply the card below. Lots of companies trying to show this are using .gif animations e.g.

Okay, I am using the transformOrigin: and its working great now, thanks. Curt

http://cwiens.com/curt/html5/cardbanner.html This has them stacking properly now. It looks like animating the x y properties is what I need to look into.

I will try this. Thanks!

I am building my first simple banner using GSAP JS. Its a 300x250 ad. I have been using GSAP AS3 for years now so I know the syntax well. I normally use TweenLite.from. Trying to understand the best way to set x y positions. The idea here is that 6 cards cycle on and off the stage from left to right. Here is what I have so far: http://cwiens.com/curt/html5/cardbanner.html I can force the second card into position through setting negative margins in the CSS. This doesnt seem like the right way to do it through. Any help would be appreciated.