Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

dev-kp

Members
  • Content Count

    29
  • Joined

  • Last visited

Community Reputation

13 Newbie

About dev-kp

  • Rank
    Member

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

2,653 profile views
  1. dev-kp

    GSAP Puller filter

    thank for the help!
  2. dev-kp

    GSAP Puller filter

    @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!
  3. dev-kp

    GSAP Puller filter

    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 G
  4. 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!
  5. 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 playin
  6. 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
  7. 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.
  8. 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.
  9. 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.
  10. 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
  11. 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 /
  12. 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?
  13. 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
  14. 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
  15. Seems changing the .set to .to with a 0.01 duration actually fixes the issue. http://codepen.io/Dev-KP/pen/WQobdQ?editors=101
×