dev-kp
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by 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.
-
Very nice! Its good to see the one size fit all setup rather then building a variety of creatives for each placement. Some interesting calculations to make the animation work at any width. Good to see the full potential of html with the use of GSAP! What's the browser cutoff, I'm assuming IE10?- 7 replies
-
- 1
-
-
- responsive banners
- responsive web design
- (and 7 more)
-
This seems to work as well. Pause the nested timelines and then play them in the global timeline. http://codepen.io/Dev-KP/pen/WQobdQ?editors=101 This is using set() P
-
Yup I did have a look at that post. The work around seems workable but a bit odd. If I build a normal timeline, with a bunch of add() and set() with out using nested timeline the set() seems to work correctly. But nested timelines run immediately, wonder if a call() function would cause the same issue? Guess will be using the 0.01 duration fix for the time be. Cheers, P
-
Seems changing the .set to .to with a 0.01 duration actually fixes the issue. http://codepen.io/Dev-KP/pen/WQobdQ?editors=101
-
Hi, Been trying to get this to work for a little while now, a bit stuck. CodePen: http://codepen.io/Dev-KP/pen/jbMWxy Basically the individual animations work: .add(aninIn(copy1, 20)) //.add(aninOut(copy1, 20)) When one of them is commented out the other will work perfectly, but having them both there seems to make them merge. I'm guessing it's something to do with the .set in the returned tiimelines? If I am not mistaken the nested timelines should play one after another? Or is this something for immediateRender? Cheers P
-
Got it working: import com.greensock.*; import com.greensock.easing.*; mc.meter.text = "0%" var push = 2 var strain = .7 // 1 normal .5 moderate .3 hard var speedCounter = 0 var tween = TweenLite.to(this, strain, {push: 1,ease: Back.easeInOut,onUpdate: showScore, paused:true}) var tl = TweenLite.to(mc, 20, {x: stage.stageWidth-mc.width/2,ease: Linear.easeNone,paused: true, onUpdate: showProgress, onComplete:done}) stage.addEventListener(MouseEvent.CLICK, changeScore); function showScore() { if (push == 1) { tl.reverse(); speedCounter = 0 tl.timeScale(.5); } else { tl.play(); if(speedCounter == 0){ tl.timeScale(1); } } } function changeScore(e: MouseEvent): void { push = 2 speedCounter+=.1 tl.timeScale(1+speedCounter); tween.restart(); } function done():void{ tl.kill(); tween.kill(); } function showProgress():void{ mc.meter.text = (int(tl.totalProgress()*100)).toString() + "%" }
-
Hi, Hope someone can help me with with this. I am trying to find a way to create a "wind effect / drift". A movie clip will be constantly be pushed back -x but clicking the stage will make it move forward +x the more you click the faster it moves. If the clicks stop it will slowly slowdown and start to drift backwards. Any support is much appreciated! Thx
-
Thanks for the reply Jack, was looking into that fix. But even with the updated com folder still the same issue happens. Take a look: https://www.dropbox.com/sh/dw1bcjx1ytcnesk/-eSlkW7ik7 There is still a jump before the animation happens. Any thoughts? Any help will be very appreciated. Thx P
-
I am getting a very odd result when using this code: import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.*; TweenPlugin.activate([MotionBlurPlugin]); function init():Void{ mc._visible = false; doFrame1(); } function doFrame1():Void{ mc._visible = true; TweenLite.from(mc,.5,{_x:mc1._x, motionBlur:true,delay:2}); } init(); There is a jump that happens before the animation. This only occurs if I use another movieclip _x for the tweenlite, which I absolutely have to do. In the main version the other mc acts like a tracker. Any ideas? https://www.dropbox.com/sh/f9fa8tnvb37ty9z/wBidYq3aYx This is a reference file. Thx P
-
Works perfectly! Ty p
