[relative move at angle, not necessarily path]

3 minutes ago, Acccent said:

if you don't have a parent element handy, you cans always use some good old maths:

 

See the Pen paNaYG by Acccent (@Acccent) on CodePen

 

 

Awesome! Thanks!

[relative move at angle, not necessarily path]

5 minutes ago, Acccent said:

Here's a pen

 

See the Pen MQbQPx by Acccent (@Acccent) on CodePen

 

 

Pure genius dude! Thanks!

 

It's always the simple and obvious, right in front of me, that seems harder to see.

Thanks again!

[relative move at angle, not necessarily path]

4 minutes ago, Acccent said:

You could rotate the parent element, I think.

 

I hear what you're saying.

That's a good and simple idea that totally evaded me. I'll try it and get back to you.

Thanks!

I would still like to know if there's a coding solution if anyone has one.

[relative move at angle, not necessarily path]

Hi everyone,

I was wondering if there was a quick way to do this without messing with paths and such.

Based on the image below, I'm using TimelineMax to animate the "trending" lines to move individually left to right (eg;  x:"-=140px") but along an angle of 17deg.

I'm not adept at using Codepen but here's a sample of my code to move one line:

 

TweenMax.set(trendingL, {rotation:'343deg'});

 

var tl01 = new TimelineMax({delay:2});
tl01.from(trendingL, 1, {x:"-=140px", ease:Back.easeOut});

 

Of course, this just moves it from left to right along at 0 deg.

 

Eventually, some of the lines will move separately to reveal other type.

Suggestions?

[Introducing anivendo (HTML Banner-Animation-App whitch uses GSAP)]

Finally! Thanks for this.

For years I've wondered why there wasn't a tool that utilized GSAP as the base code for banners.

I can't wait to play with this. And a PC version at that! Sweet.

I don't know if I have the attention span to be an Alpha Tester but I'll let you know if I come across a bug or suggest a feature that would make the workflow easier/faster.

[Sizmek Ad Size Calculation]

The way the Sizmek calculates sizes is definitely out there. Your zip that you upload is different from their "Workspace". They don't count everything in your zip. As I understand from their guidelines, after you upload your zip to the "Workspace", each element is automatically compressed on it's own and then recalulated. (Only the largest video is counted if more than one video. See second link for other "exceptions".) Odd and overly complicated, I know. One of the several reasons I steer clients away from Sizmek. Every time I work with them, they dodge questions or simply won't answer and arguments all the way. Emphasis added is mine.

 

"The size of an HTML5 ad is the total size of all assets in the ad’s Workspace, at the compressed size. This includes images, the largest video, fonts, JavaScript files, HTML files and any other files. We do not count additional assets for dynamic creative or videos. Compression is automatically applied which reduces the size of each asset type to the compressed size. "

~under Rules and Guidelines @ https://support.sizmek.com/hc/en-us/articles/200722459--overview-HTML5-Workspaces

 

"Ads that contain additional assets are calculated exactly as ads with Workspaces only; however, there is one exception. If the ad has an additional asset that is larger than the largest video in the Workspace, that asset is included in the calculation instead of the largest video.

The following table describes how ad size is calculated according to the different ad types..."

~https://support.sizmek.com/hc/en-us/articles/206239683--howto-Calculate-the-HTML5-Ad-Size

 

[Animation stuttering in IE, Edge, Firefox]

You could also add force3D:false to your tweens and that should remove the blurriness of the image.

 

Great tip!

 

However, I noticed when I include force3d:false to keep things crisp, the stutter comes back in MS Edge. Either keeping it out or set to 'true', the animation plays smoothly. (Referencing a similar project I'm doing.)

 

Have you experienced this?