Devotee007
-
Posts
35 -
Joined
-
Last visited
Recent Profile Visitors
1,870 profile views
Devotee007's Achievements
8
Reputation
-
Timing is a bit off when using restart()
Devotee007 replied to Devotee007's topic in Banner Animation
I will try and get a demo together. It's one animation that is affected the other ones seems to be the same efter the restart. The one that is affected seem to be sped up and not as smooth as in the first run. I will come back with a demo. //Devotee007 -
Timing is a bit off when using restart()
Devotee007 replied to Devotee007's topic in Banner Animation
I have gone over to GSAP 3, but these are some old banners I've done before and I don't want to re-do them. They are to be shown in a portfolio gallery. Can't put them up here because the client haven't given me approval to show them outside of campaign yet. //Devotee007 -
Hi! I have done some banners that I want to be able to restart from a button click. I use tl.restart(true, false) to restart the banner. But when I do some of the animations feels sped up and a slightly out of sync. I have a delay on the timeline before it starts playing, var tl = new TimelineMax({delay:.3, paused:true});, can that be the problem? Or am I using restart wrong? What's the best way to restart a timeline? //Devotee007
-
Draw a line along SVG path - MorphSVG or DrawSVG?
Devotee007 replied to traummaschine's topic in GSAP
This might be off topic, but I'm trying to draw lines with DrawSVG. It works, the circle is drawn, but it's not drawn with one stroke, it's drawn with the outerlines of the stroke not just one line as I want. Have I exported the SVG from AI wrong or can I have done something else wrong? Is it the way it's drawn in AI, I haven't drawn it myself. It's not my department... -
Jump back and forth in a timeline with a steppedease spritesheet
Devotee007 replied to Devotee007's topic in GSAP
Thank you, it make sense, very well explained. -
Jump back and forth in a timeline with a steppedease spritesheet
Devotee007 replied to Devotee007's topic in GSAP
Thank you for the help and the heads up on the old CDN! I have tried it now and it works great! I have one question, what does overwrite:true do? -
Hi, I'm trying to do a spritesheet that moves to a certain point on clicking different points of interests. I have succeded in doing a steppedease that gooes forward and backwords when clicking on two points. But I have three points A, B and C and I want to play the spritesheet correct if you are for example on C and clicks A it should go there, and if I click B from A it should go there. Is this possible to do in one Timeline? Below is the code I have: <!DOCTYPE html> <html> <head> <title></title> <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script> <style> #back { position: absolute; left: 0px; top: 0px; width: 50%; height: 100%; cursor: pointer; background-color: #ccc; opacity: .5; z-index: 1; display: flex; justify-content: center; } #forward { position: absolute; right: 0px; top: 0px; width: 50%; height: 100%; cursor: pointer; background-color: #eee; opacity: .5; z-index: 1; display: flex; justify-content: center; } #timeline { position: absolute; top:0px; left:0px; width: 100%; height: 100%; z-index: 2; pointer-events: none; display: flex; justify-content: center; align-items: center; } #object { top:0px; left: 0px; width: 652px; height: 652px; background:url(sprite-30fps.png); background-repeat: no-repeat; } </style> </head> <body> <div id="back">BACK</div> <div id="forward">FORWARD</div> <div id="timeline"> <div id="object"></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> <script> var tl = new TimelineLite({paused:true}); tl.to("#object", 1, {backgroundPosition: "50% 0", ease:SteppedEase.config(14)}) .addPause() tl.to("#object", 1, {backgroundPosition: "100% 0", ease:SteppedEase.config(14)}) $('#forward').on('click', function(event) { event.preventDefault(); tl.play(); }); $('#back').on('click', function(event) { event.preventDefault(); tl.reverse(); }); </script> </body> </html> //Devotee007
-
HI, I have tried to do this on a flex-box now, and I almost got it. But, the CSS-transistion doesn't happen on the box, instead it fills in the "box" of the browser window? //Devotee007
-
Sahil, thanks a lot for this great answer! I will try this out on Flexbox. //Devotee007
-
Hi, I'm thinking about animating the border on a flexbox using :after and :before just as it's done in the Codepen and the example "Draw Meet". But before I try to do it, is it possible to animate :after and :before with Greensock? //Devotee007
-
Ok, I start a nre thread. Thanks.
-
I was thinking about doing this "Draw Meet", but not on a button, but a flexbox with border, with the help of Greensock, reading the above makes me think that it is possible. But before I start, is it possible?
-
Hi, I try to do a sprite animation with an image that is 4000x3800. And it works rather good but every time it changes row it "blinks". I want to move it 20 steps at a time vertical and after that move the image up 200 px and move image from left 0px to 4000px again. This is the code I use. <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Sprite Sheet Animation</title> <style> #character { width: 4000px; height: 3800px; background: url(circle-sprite-2.png); } </style> </head> <body> <div style="width: 200px; height: 200px; background-color: #ccc; overflow: hidden;"> <div id="character"></div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script> var tlCircle = new TimelineMax({delay:0, repeat:-1, repeatDelay:0}); tlCircle.to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 0) .set(character, {x:0, y:"-=200"}, 1) .to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 1) .set(character, {x:0, y:"-=200"}, 2) .to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 2) .set(character, {x:0, y:"-=200"}, 3) .to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 3) .set(character, {x:0, y:"-=200"}, 4) .to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 4) .set(character, {x:0, y:"-=200"}, 5) .to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 5) .set(character, {x:0, y:"-=200"}, 6) .to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 6) .set(character, {x:0, y:"-=200"}, 7) .to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 7) .set(character, {x:0, y:"-=200"}, 8) .to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 8) .set(character, {x:0, y:"-=200"}, 9) .to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 9) .set(character, {x:0, y:"-=200"}, 10) .to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 10) .set(character, {x:0, y:"-=200"}, 11) .to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 11) .set(character, {x:0, y:"-=200"}, 12) .to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 12) .set(character, {x:0, y:"-=200"}, 13) .to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 13) .set(character, {x:0, y:"-=200"}, 14) .to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 14) .set(character, {x:0, y:"-=200"}, 15) .to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 15) .set(character, {x:0, y:"-=200"}, 16) .to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 16) .set(character, {x:0, y:"-=200"}, 17) .to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 17) .set(character, {x:0, y:"-=200"}, 18) .to(character, .8, {x:-2800, ease:SteppedEase.config(14)}, 18) Is there a smarter way to do this? I guess there is... //Devotee007
-
Thank you all, I got the client to NOT go with this solotion. And to Greensock, sorry for posting this question here in the first place. //Devotee007
-
Hi, A client wants to delay the time before the click on the clickTag happen. A short message is to be shown before the new tab/popup opens. But when I put the clickTag in a setTImeout all browsers gives me warnings about a popup window. I have set my browsers to open tab instead of popup. If I take away the setTimeout it works as it should, there is a short delay and then the tab opens with the correct link. What can this be, I can't see anything wrong with the setTimeout? function clickTagUrl() { setTimeout(function() { window.open(window.clickTag, "_blank") }, 800); } //Devotee007
