dev-kp

You can try .getChildren that will log out all tweens on a timeline as an object and you can filter the array out if you only need 'fromTo()' and 'to()' https://codepen.io/dev-pk/pen/LYqBLgr Pretty sure there is a way to do that to GSAP on a global level rather then by timeline as well

Do you mean something like this: https://codepen.io/dev-pk/pen/VwGvgwx Or did I misunderstand what you are trying to achieve?

You can do either, you can use the #COPY in css to add styles or you can add them directly in the the smartObject this.copy1 = this.smartObject({ id: "COPY1", innerHTML: "This is live text and not an image", fontSize: 15, color: '#ff0000', 'font-weight': 700, parent: this.banner }); Either add it as camelCase eg fontSize or fontWeight Or put the css property in quotes if using a - hope this helps!

This looks like Bannertime this.copy1 = this.smartObject({ id: "COPY1", innerHTML: "This is live text and not an image", parent: this.banner }); gsap.from(this.copy1, {duration: 1, autoAlpha: 0})

thank for the help!

@ZachSaucier thank you for this! completely forgot about that part! In regards to the arr 'lookup' is there no clever way to use % or something? Gonna try and figure it out if any ideas let me know. And thanks again!

Hey all, Based on @OSUblake codepen - I have changes a few things. Original codepen: https://codepen.io/osublake/pen/YrXdGZ 1. I am trying to create a way to display the selected value - the grey box at the top. I am using a .hitTest not sure if that the best way to do this. 2. I also want to find a way to have the selected value start on a specific value, this is kind of working but I had to do a very long way to achieve this. Line 25 using startValue variable. It compares two arrays and is a very painful way of doing it. 3. I tried to rewirte this in GSAP3 but no luck - everything gets broken (think its the negative progress update) https://codepen.io/dev-kp/pen/zYrqydo?editors=0010. No values show up unless you drag and it gets stun and all the spacing is completely off. Any help anyone help give would be great! Thank

Hey Jack! Yes thats very helpful! I did think of using SlowMo at first but couldn't get the effect just how I wanted it. So split it up into 3 tweens. Thanks for the help!

Been struggling with this for a while now and can't seem to solve the issue. My animation has a box comes in from right (outside the 'banner' container) then the next tween needs to overlap and slow down the animation. .from(div1, {duration: 0.3, x: 300}, 'f1+=0.5') .to(div1, {duration: 6, x: '-=40'}, '>-=0.5') 2 sec later the next tween pushed the box out to the left. The problem is that on repeat the slow tween doesn't play. .to(div1, {duration: 0.3, x: -410, overwrite: 'auto'}, 'out1') If I remove the overwrite: 'auto' then the slow tween keeps playing after the box goes off to the left. Any suggestions? The only way I found a way around this to add a .call function https://codepen.io/dev-pk/pen/MWYJGEG

Hi GameSite, Had a look at the image you provided. This really shouldn't be happing. Can you give the URL to the website? Can have a look. Cheer, KP

Hey Idan! I think SVG would a very good fit for this: This is the example provided by Greensock. tl.staggerFromTo(shapes, 1, {drawSVG:"100%"}, {drawSVG:"50% 50%"}, 0.1) .fromTo(shapes, 0.1, {drawSVG:"0%"}, {drawSVG:"10%", immediateRender:false}, "+=0.1") You can directly control the line and how it will draw, this includes the start and end positions. Hope this helps.

About to years ago when I just made the switch from Flash to html/css/js I would have been in agreement with this. But now two years later, I find hand coding speeds up the process incredibly. There is a bit of learning curve, but once everything is setup the process couldn't be more easier. Task runners alone provide so much benefits. On top of that you can automate so much, preview link generation, automatic platform change (DC, DCM, Sizmek) and the list goes on. Just last week I've build a full campaign of 54 creatives in under 2 working days, using Bannertime, and saved so much time.

Hi sschulman and welcome! Had a quick look at this and yes can't seem to animate the x and y attr or a table or div. I've experimented with an SVG version and that seems to work: <svg width="300" height="250"> <rect id="rect" width="100" height="100" x="0" y="0" style="fill:rgb(252,81,48);" /> </svg> TweenLite.to("#rect", 1, {attr:{x:250, y:200, width:50, height:50}, ease:Power1.easeOut}); See full version here: http://codepen.io/Dev-KP/pen/jWQmKb Hope fully that will help.

Hi dia, and welcome to the forums. A bit unclear about what you are after; if you clarify a bit better that would help. Is it something like this that you are looking for: http://codepen.io/Dev-KP/pen/RrZVeb

You can try something like this: https://codepen.io/Dev-KP/pen/adWdKG?editors=101 Basically before each repeat there is a check to see if the total time will be more then 15 sec. tl.totalTime()+tl.totalTime() >= maxTime ? tl.pause() : tl.repeat(); If it is then the animation will stop and if not then another repeat will occur. This will only work with timeline. var maxTime = 15; var loops = 3; var tl = new TimelineMax({repeat:loops, repeatDelay:1, onRepeat:function(){ // Check if another loop of the animation will make the total time of the animation longer then 15 sec // More or equal to 15 sec the animation will stop // If its less it will repat tl.totalTime()+tl.totalTime() >= maxTime ? tl.pause() : tl.repeat(); }, onUpdate:function(){ //outputs the time into the text box document.getElementById('time').value = tl.totalTime(); }}) tl.to("#div1", 4, {x:300}) .to("#div2", 4, {x:200}) .to("#div3", 4, {x:100}); Hopefully that helps.