retropunk
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by retropunk
-
-
awesome gears animation!
- 1
-
please star this topic if you haven't already
https://bugs.chromium.org/p/chromium/issues/detail?id=596382
Thank you!
-
please star this topic if you haven't already
https://bugs.chromium.org/p/chromium/issues/detail?id=596382
-
haha, I guess I misread your post and fixed everything BUT that
- 2
-
Great article by Cory.
I totally agree that Animate CC and GSAP will once again rule the banner landscape.
Hopefully this time using less CPU
- 3
-
Hi there. Welcome to the GSAP forum. I am sure Carl and gang will post some helpful starter links on GSAP and CodePen.
In the mean time take a look
See the Pen NNjGbq by SnapToPixels (@SnapToPixels) on CodePen
1. You don't need to define the body tag in the HTML
2. scripts should be imported via the Pen Settings panel
3. Also, something I like to do with banners is set the visibility to hidden on the wrapper div and then at the beginning of the GSAP timeline I set the visibility back to visible. It helps with the flicker too.
Hope that helps in the mean time.
Here are some other links too:
GSAP Getting Started
http://greensock.com/get-started-js
Here is a nice CodePen starter you can fork
See the Pen PZdNMG by GreenSock (@GreenSock) on CodePen
I would also look at the GSAP CodePens. There are tons of easy to learn pens
Good luck!
- P
- 2
-
-
Thanks Jonathan, I suspected it was dangerous. We have some developers that play fast and loose with GSAP and this helps me. That W3C link is perfect!
Thanks for the quick response
- Patrick
- 2
-
This is something I found out by accident.
If you have a div id named "logo"
You can target it with GSAP without defining a var or using the quotes '#logo' in the Tween
This works and I was surprised because I didn't define a var:
TweenMax.to(logo, 1, {scale:0.5});
Depending on what I am doing I will define the var
var logo = getElementById('logo'); TweenMax.to(logo, 1, {scale:0.5});
or just
TweenMax.to('#logo', 1, {scale:0.5});
Is this a happy accident or is it dangerous? Not sure why it would be dangerous but I wanted to ask just in case
With my luck this was probably blogged about and I am behind the curve again
Thanks
- P
See the Pen JXbLow by SnapToPixels (@SnapToPixels) on CodePen
-
so not only are background-image animations jittery, text elements with a transform will also be blurry.
-
yeah thats very cool but I'm hoping that since this only seems to be a Chrome OSX only issue that it will be fixed (Chrome or GSAP) without having to do a workaround like that.
-
Interesting Blake, but that's for canvas right? This issue is CSS related.
Chrome will be updated, transforming the background image shouldn't be any different from img tags.
-
Hey Carl, I wanted to comment because switching all images to use the img tag affects my current workflow greatly.
I almost always use sprite sheets.
All of the sprite sheet creation tools I have ever used, use background-image and background-position.
My knee-jerk reaction is "how the heck do I switch to img tags?" ARGH!
It never dawned on me to try img tags with sprite sheets, clip-path maybe?
I only used background-image because thats what TexturePacker uses for CSS.
I'll look to see if it can use the img tag but I don't think so.
Anyways, just chiming in.
Thanks
- P
-
So for fun I added a bit more interactivity and 2 images.
In the Standard profile there is a call to the game function. This should help you get started.
Until the JSON issue is worked out in Animate just publish without sprite sheets.
See if you can win!
-
This is totally badass. I will be using this the first chance I get!
Great job and thanks for sharing!
-
sure happy to help. As time goes by I'll upload new templates.
This first set was literally the first 2 I created. As with all templates they will change and improve over time.
Thanks!
- Patrick -
I'd be careful using 2 functions called windowLoaded()
I suggest renaming your function in the FLA to something more appropriate to the methods inside
startAnimation() for example
You also don't need this extra load call. The body init is already doing this.
Rename your function in the FLA to startAnimation and then move the function into the init via CreateJS in your Profile template.
That will fix it
function init() { $CJS_INIT stage.scaleX = stage.scaleY = window.devicePixelRatio || 1; console.log('window loaded'); document.startAnimation(); }
- Patrick
- 1
-
@joe_midi that looks promising.
Do you have access to any verbose examples on set up/workflow/creation? I would love to see more.
A framework like this could go a long way in helping devs standardize their process.
Thanks for sharing! Very cool
-
Upload your file and I'll take a look.
- 1
-
Also, if you create a profile similar to the ones I've included you can always include the JS imports and not worry about them being overwritten.
- 4
-
correct, Rich Media units in DC Studio use the Enabler.exit commands
standard units use regular clickTags
-
Hey guys, I made an update to the template for both Standard and Rich Media.
I forgot that when you are uploading the DoubleClick you need to use the DC GSAP link:
https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.0_499ba64a23378545748ff12d372e59e9_min.js
I tweaked the retina scripts and added a small animation that shows how to target sprites using GSAP from the timeline or the main JS file.
This is a work in progress so please report mistakes or any suggestions on how to do things more efficiently.
- Patrick
- 2
-
Take a look at Google Web Designer. A few devs I know use it and get excellent results
From what I understand the animations are all exported as CSS once you publish.
The devs I know that use it are skilled in animation as well.
It's worth a look.
- 1
-
Hey guys, with Animate and CreateJS I found that using the stage.enableMouseOver() a bit laggy even if you bump of the rate.
Check out the template in this thread where we use Animate CC and GSAP together. There are 2 Profile templates for Standard and Rich Media DC Banners
http://greensock.com/forums/topic/13774-animate-cc-gsap-starter-file-needed/#entry58050
Depending on how you need the cursor to perform this may or may not work for you. In most banner cases this template should serve you fine.
Take a look and let me know how it works for you
Good luck
- Patrick
How to protect my GSAP animation code?
in GSAP
Posted
There are plenty of JS Obfuscators around that will absolutely make it much harder for people to get at your code.
I would start there and see how it goes.
I've never used one so I'd be interested in hearing how it goes.
Good luck!