Jump to content

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


  • Posts

  • Joined

  • Last visited

Profile Information

  • Gender
  • Location

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

pils's Achievements

  1. Thank you kind sir! I can start working with this. Had a small issue when adding a ease like "back.in" to it. Because, off course, the next value will be less then the last value while doing the easing animation. I now fixed this where the condition also checks that the value is lower then a certain value(-100 now), this feels a bit hacky tho. You have any ideas on this? See codepen: https://codepen.io/luffyy/pen/GROgKRO let difference = newX - lastX; if (newX < lastX && difference < -100) { gsap.set(box, { text: symbols[Math.floor(Math.random()*symbols.length)] }); }
  2. Hi, This codepen is from the modifiers plugin page and i'm trying to adjust it so that when a box goes beyond the 500 point, it not only resets x:0 but also let's me run another function. I want to be able to for example change the background-color of the box when it goes over the 500 point, or maybe the number that is in the box (only change for the one that is going back to x:0). What i tried so far: - In onUpdate run a function when a box goes over 500 > Not sure if i was doing it right but didn't seem consistent. Is there a way to do this?
  3. Wow, finally had some time to play around with this again. And indeed it seems playing around with the values will get the job done. It's not perfect yet but i will get there. Thanks for the help! https://codepen.io/luffyy/pen/GRJjgrw
  4. Wow, this title must make sense. Hopefully the Codepen helps making this clear. So i have this path that i draw with DrawSVG, and it's "removed" after the whole line is drawn. Now i want the remove-effect happening while the line is still drawing on the other end. Lowering the delay on the remove-effect is not working so i think i'm going about this the wrong way. How should i do this?
  5. Hi, i have found a function that creates a random shake effect. The effect is now endless but i want to use this function in my timeline for a x amount of seconds. See codepen for the shake effect, below is kinda how i want it to work. function Tween(){ var T = TweenLite.to(".circle",0.02,{x:R(-10,10),y:R(-10,10),scale:R(1.1,0.9),rotation:R(-10,10),ease:Sine.easeInOut,onComplete:Tween}) }; function R(max,min){ return Math.random()*(max-min)+min }; var tl = new TimelineLite(); tl.add(Tween) .to('.circle', 1, {scale:50, y: -30}, "start+=0.5") .from('.circle-2', 0.3, {opacity: 0.0, scale:10}, "start+=0.6") .to('.circle-2', 0.6, {x:100, ease: Elastic.easeOut}, "start+=1.25") .from('.blokker', 0.6, {opacity: 0.0, x:15, ease: Elastic.easeOut}, "start+=1.4"); So this adds the shake effect to my .circle class but obviously this keep going and going. Just like the rest of my timeline i want this effect to last for a x time and then move on with playing the rest of the timeline.