[Proportionally scalable eAdvertising / banners]

8 hours ago, Rodrigo said:

As far as I can see this in your demo is scaling properly. What exactly is not working, or the issue here? Sorry but maybe I'm missing something obvious here 🤷‍♂️

Hi, thank you, indeed I continued searching for hours yesterday and found this solution using gsap:

function resizeAd () {
	var scaleRatio = adcontainer.offsetWidth/sc.offsetWidth;
	gsap.set(scalableContent,{scale:scaleRatio});
}
window.addEventListener("load", resizeAd);

I'm not sure it's the most optimised but it seems to work, I'm waiting for a live test of the media agency.

 

I cleaned up the code a little and maybe this will help others in the futur.

[Proportionally scalable eAdvertising / banners]

Hi guys,

 

this won't be explicitly a gsap question I think, or maybe a gsap solution exists. 

 

I've already searched on the forum and have read a lot of topics about responsive, scaling,...

But didn' found a solution that worked for my problem.

 

I did a whole campaign of banners and now the media agency comes back to me complaining "it's not responsive" but from what I understand they need banners that scales down when needed and keep it's proportions.

 

So for example I have a 970x250 format but they also want to use it for mobile and it must scale if the desktop browser gets smaller than 970 width... I thought they where using an iframe with a content scaling but no it's js injection or something like that that I don't know, I'm really not a js genius...

 

So I need to quickly adapt a whole campaign to that need, I made a codepen of a typical banner as I'm used to do.

I'm trying to find out how to scale this banner when browser/mobile gets smaller, any idea ?

 

See the Pen QWPXEeL by fripi (@fripi) on CodePen

[animate *MAGIC SPARKLES* along a path onClick (for multiple instances)]

OK thank you, that's indeed logic

Now I need to see if I can have multiple paths like the initial post of this thread

[animate *MAGIC SPARKLES* along a path onClick (for multiple instances)]

With a little search and a lot of inspiration of other pens I came to this

See the Pen zYbKadQ by fripi (@fripi) on CodePen

 

But when I pause my animTL at the creation and click on the button noting happens

if I don't pause the animation restarts every time I click

[animate *MAGIC SPARKLES* along a path onClick (for multiple instances)]

Hi,

 

this is a pretty old topic, but exactly what I need, I'm searching a much more recent version because when I try to replace the External Scripts from tweenmax to gsap it stops working...

Also I don't understand why snap is useful 🤔 just an svg with MotionPath could be better ?

[Splittext and <pre>]

2 hours ago, GreenSock said:

Yeah, that's not really what SplitText is intended for - you've got a bunch of nested elements intermingled with text content. You could make it work by wrapping all the content in sub-nodes consistently (rather than mixing and matching). Wrap the "loose" stuff in <span></span> like: 

Thank you Jack,

luckily it's a short snippet that needs to be animated

So it was already very packed and by adding a lot of spans it works 🤪 it's great I love that plugin

 

[Splittext and <pre>]

Hi,

 

I'm trying to kind of animate a code typewriting.

I'm using <pre> to layout the text and it starts well, but after 3 lines it doesn't respect any layout anymore and just put everything in one line

any clues ?

 

thanks

See the Pen KKRvaNm by fripi (@fripi) on CodePen

[Countdown with rolling numbers]

thanks @Cassie I learned something new once more 🥳

[Countdown with rolling numbers]

12 minutes ago, Cassie said:

Yeah, definitely time to apply some artistic license 😂

I changed some settings and tried to add an ease at the start and end of the whole animation, but now numbers don't start from 0 anymore, what have I done wrong this time 🙈

[Countdown with rolling numbers]

See the Pen XWZYZww by fripi (@fripi) on CodePen

 

Yeah it is indeed pretty fast 😅

[Countdown with rolling numbers]

36 minutes ago, Cassie said:

I don't see why not - 7 divs using transforms doesn't sound like a lot to me. But if it's an issue you could swop over to canvas.

 

Why don't you give it a go? We're here if you have GSAP questions

in terms of gsap animation, how can I put a global time to handle all the repeats, if the total time is 10s for example, how to align all those durations ?

 

animTl
        .add("p1")
        .to(n1,{y:"-=800", repeat:200000},"p1")
        .to(n2,{y:"-=800", repeat:20000},"p1")
        .to(n3,{y:"-=800", repeat:2000},"p1")
        .to(n4,{y:"-=800", repeat:200},"p1")
        .to(n5,{y:"-=800", repeat:20},"p1")
        .to(n6,{y:"-=800", repeat:2},"p1")
        .to(n7,{y:"-=160"},"p1")

[Countdown with rolling numbers]

4 minutes ago, Cassie said:

Hey there fripi - we're very happy to help with GSAP-specific questions in these forums, but it looks like this thread already goes into a lot of detail.

 

Is there something you're struggling with from an animation perspective or are you just stuck on the logic?

Well is it even possible to make 7 columns move that fast, animation/cpu/gpu wise ? I'm no developer, animating thing, I did it in after effect mut in html I'm not sure 

[Countdown with rolling numbers]

On 4/10/2018 at 1:38 AM, PointC said:

 

I'm not sure if that is even close to what you had in mind, but maybe it will give you some ideas. Happy tweening and welcome aboard.

Hi, this is a great example of what I'm trying to do, I understand the logic and animation for 1 number, I started with a div going vertically from 0 to 9...

But I need to go from 0000000 to 2.000.000 in 5 or 10 s, which is very fast and involves 7 columns, so I don't know what to do, just make everything move very fast without really counting maybe... any idea ?

 

 

in terms of repetition/loops that means that those values should be used for each column:

.2 / 2 / 20 / 200 / 2000 / 20000 / 200000

seems difficult to handle

 

[Auto word gradients - splitText]

Thanks again, I modified my pen, it works great, I will try later to shorten that code if I understand how  

[Auto word gradients - splitText]

@Cassie is there a way to start from array[0] for each sentence, or must I create a word array for each like that

 

let words1 = gsap.utils.toArray('#txt1 .w')
let words2 = gsap.utils.toArray('#txt2 .w')
let words3 = gsap.utils.toArray('#txt3 .w')
let words4 = gsap.utils.toArray('#txt4 .w')
...

 

[Auto word gradients - splitText]

thank you @Cassie that's a discovery for me

now i can just update that array to create the needed gradient woooowww

[Auto word gradients - splitText]

Hi everyone,

 

I'm here again with something that can maybe be done just in js but as I use gsap for my banner animation I thought it could also help me with some "design" problem.

 

I have very strict guidelines to follow : for every sentence in my banner,  every 2 words the color must change (yellow > orange > red > orange > yellow > orange...). So I started by just manually put some spans with styles (second text block in my pen) but that makes the code kind of difficult to read and also it messes up the breaklines.

 

As I already use splittext to make it appear line by line I was thinking that maybe i could set a color by breaking the sentences by words, but i'm kind of stuck there in the logic, has anyone an idea ?

 

thank you 

See the Pen jOYdRXr by fripi (@fripi) on CodePen

[Sizmek CDN]

again time to update some templates, they already updated to 3.9.1 !

 

oops wrong subject, it's Sizmek here and I talk about doubleclick, sorry

[Sizmek CDN]

They really listen and act quickly, I asked for an update 2 days ago and it's done, 3.8.0 time to update your templates 😁

 

<script src="https://s0.2mdn.net/ads/studio/cached_libs/cssruleplugin_3.8.0_min.js"></script>
<script src="https://s0.2mdn.net/ads/studio/cached_libs/draggable_3.8.0_min.js"></script>
<script src="https://s0.2mdn.net/ads/studio/cached_libs/easelplugin_3.8.0_min.js"></script>
<script src="https://s0.2mdn.net/ads/studio/cached_libs/easepack_3.8.0_min.js"></script>
<script src="https://s0.2mdn.net/ads/studio/cached_libs/gsap_3.8.0_min.js"></script>
<script src="https://s0.2mdn.net/ads/studio/cached_libs/motionpathplugin_3.8.0_min.js"></script>
<script src="https://s0.2mdn.net/ads/studio/cached_libs/pixiplugin_3.8.0_min.js"></script>
<script src="https://s0.2mdn.net/ads/studio/cached_libs/scrolltoplugin_3.8.0_min.js"></script>
<script src="https://s0.2mdn.net/ads/studio/cached_libs/scrolltrigger_3.8.0_min.js"></script>
<script src="https://s0.2mdn.net/ads/studio/cached_libs/textplugin_3.8.0_min.js"></script>
 

[Splittext wrap lines in lines?]

23 hours ago, akapowl said:

 

Hello @fripi

I think the 2 splits is just a nifty little trick allowing each line to appear out of nowhere without having to wrap each of the lines in a wrapper with overflow: hidden 'manually'.

For the width-related question, try this:

.lineParent {
  overflow: hidden;
  max-width: max-content;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/max-content

Oh great thanks!

Never heard of that keyword, again I learn something very useful !

Now that's exactly what I was trying to do 

[Splittext wrap lines in lines?]

On 12/15/2020 at 4:52 PM, PointC said:

A demo would be great @Black Ducas. Here's my demo from above updated to GSAP 3. Seems okay to me.

Hi,

 

I was searching for almost exactly that, but I don't understand why 2 splits ?

 

And also I'm trying to figure out ow to limit the width of the line divs to the content exactly, so I did a fork of your pen :

See the Pen ZEJPPJq by fripi (@fripi) on CodePen

And starting from that point I try to have the div (with overflow:hidden;) to stop at the red lines, now they all stop at the blue one.

I tried things like like .lineChild{width:auto;} but can't figure out if it is possible...

The idea is that de text appears from the bottom or left side and then moves out to the right but disappears directly at the green bars, not further.

 

 

Have a nice day

 

 

[SVG : centering and morphing]

56 minutes ago, GreenSock said:

You can also center things by doing a simple gsap.set() with x and y offsets calculated using getBBox(). 👍

Kind of what I did here no ?

 

var adW = 970/2,
    adH = 600/2,
    ads = document.getElementsByClassName("stroke");

for (var i = 0; i < ads.length; i++) {
      var element = ads.item(i);
      var positionInfo = element.getBoundingClientRect();
      var height = positionInfo.height;
      var width = positionInfo.width;
      gsap.set(element,{x:adW-width/2, y:adH-height/2})
}

must search what getBBox is, thanks

[SVG : centering and morphing]

23 minutes ago, Cassie said:

Hope this helps!

We try to keep the questions in these forums GSAP-specific, so If you have more SVG-related questions, I'd be happy to give you a link for my SVG slack community.

Yes thanks and oops sorry I got a little out of scope here 

[SVG : centering and morphing]

Thank you @Cassie I indeed added a random stagger, not sure it's all random but it's a start in the effect I was looking for.

Regarding the center, nom all rectangles are alignes to top left, I would like to have them all in the center.

 

 

I just centered them but it's not a very clean code, each position is done one by one by entering fix values, I would like to know if that can be done in a more efficient way

[SVG : centering and morphing]

Hi everyone,

 

I'm just starting with svg and am a little lost;

I just did those squares you can see in my pen now I have serveral questions:

• how can I center all those, is there an easy way or must I place them one by one in the global div of 970x600px ?
• once centered I would like to just trace one, the first, and then morph from one to each other, but did I defined the svg well to do that? or must i do separated svgs?
• another idea while I learn would be to trace them all like now, but then to illuminate (change the fill alpha in yoyo ?) randomly those rectangles.

So yes I know a lot of questions in one time, trying to learn making svg, drawing and morphing 😅

 

Thanks for your time

See the Pen MWvELwB by fripi (@fripi) on CodePen