Devotee007
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by Devotee007
-
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
-
Thank you for all help! It works fine now. I only scale up two numbers from 20px to 40px and it looks OK. I have mananged to center it now with your help. //Devotee007
-
Hi, I'm doing a simple: TweenMax.to(".btn-text", 1, { fontSize: 40}); Start size of the text is 20. When text change it scales to the left. I would like it to scale up "centered", is there a way to do that? //Devotee007
-
How do I do this if I have transparent PNG:s? I have to show and hide the PNG to get it to work. Now all stack on top of each other.
-
Thanks for your tip Davi! I have tried to do one with the DOM3D props now. I get it to spin, but I can't figure out how to get the space between the letters as in the video above. Don't have a Codepen account, but I have attached the thing I've done in the post. test-with-3d.zip
-
Hi, I'm trying to do a text animation like the one they have don in this YouTube-video in the end: Been trying a lot of different values on rotationX, transformPerspective and transformOrigin", but I just can't make it work. :-/ Any help to get started in the right direction would be very appreciated.
-
Thanks for your input! I will try and go with SVG. //Devotee007
-
I'm about to do some text animation. I want to recreate the animation in the Alien Covenant trailer. Is it a good idea to use SplitText for this or is it better to animate it letter for letter? What do you think? Example here: //Devotee007
-
Thanks for clearing it up, PointC, I'm quite new at this. I will consider getting a membership, Greensock is really awesome! //Devotee007
-
Nicely done Diaco! Thanks for the help, but I don't have a Club Greensock membership, so I can't use that method. Or maybe I do something wrong. //Devotee007
-
Hi, Is it possible to stagger from center and out? I have 5 objects in a row and would like the center one (1) fade in from bottom to top and then the two ones next to it (2 and 3) fades in and last the two on the end (4, 5) comes in. 4 2 1 3 5 //Devotee007
-
Thank you! I see that I was on the right track, but not quite...
-
I want to do something like this http://jsfiddle.net/leaverou/zXPzY/light/ and I have tried a lot of things now, but I can't get it to work. I can rotate the below code with: var circle = new TimelineMax({repeat:-1, repeatDelay:0}); circle.to("#circle", 2, {rotation:360, transformOrigin:"center", ease:Linear.easeNone}, 0); But I cant get it to go in a circle at the same time. <div id="content"> <div id="circle" style="width:100%; height:100%; position:relative; top:0px; left:0px;"> <div style="width:50%; height:100%; overflow:hidden; position:absolute; top:0px; left:0px;"> <div style="position: relative; border-radius: 100%; height: 100%; width: 200%; background-color: #3498db;"></div> </div> <div style="width:50%; height:100%; overflow:hidden; position:absolute; top:0px; left:50%; transform: rotateY(180deg);"> <div style="position: relative; border-radius: 100%; height: 100%; width: 200%; background-color: #2980b9;"></div> </div> </div> </div>
-
Hi, I try to loop a timelineMax from a certain point. I have set a label, I think, but it starts from the begining, almost. It doesn't matter where I set the label. At the end I want it to wait half a second before it restarts from this line ".set(".txt1Content", {y:-10})". What am I doing wrong? var fadeOutForm = new TimelineMax({repeat:-1}); fadeOutForm.fromTo(".background", 10, {y:-40}, {y:0}) .to(".formContent", 1, {y: -40, ease:Power4.easeOut}, .1) .to(".formWrapper", .3, {alpha:0}, .2) .set(".txt1Content", {y:-10}, "txt1Wrapper") .set(".txt1Wrapper", {height:"0px"}) .to(".txt1Wrapper", 1.2, {height:"129px", opacity:1, ease:Expo.easeOut}, .6) .to(".txt1Content", 1.2, {y:20, ease:Power4.easeOut}, .6) .to(".txt2Wrapper", .6, {autoAlpha:1}, 1.2) .to(".txt1Wrapper", .3, {opacity:0}, 5) .to(".txt2Wrapper", .3, {alpha:0, onComplete:restart, onCompleteParams:["txt1Wrapper"]}, 5); function restart(position) { console.log(position) fadeOutForm.play(position); } //devotee007
-
Flash Professional HTML5 Canvas export with GSAP
Devotee007 replied to Carl's topic in Banner Animation
Hi Carl, Thanks for the links, I will ask there. //Devotee007 -
Flash Professional HTML5 Canvas export with GSAP
Devotee007 replied to Carl's topic in Banner Animation
Great video, thanks! Just a question about the spritesheet that the program creates. Is it possible to do it in any other way because the spritesheet, in this case, is 226 KB. The file sizes of the two images is 46 KB and 2 KB. I used TinyPNG on the created spritesheet and got it down to 76 KB, but that is still a lot more than 48 KB. //devotee007 -
Stop looping banner after a set amount of seconds?
Devotee007 replied to Devotee007's topic in Banner Animation
Sorry for my not so in depth question. I meant stop a timeline loop after a certain amount of time, so Carl gave me the answer I was looking for. Thanks a lot for the help Dipscom and Carl. //Devotee007 -
Hi, Is there a away to loop through a set of animations for, let's say 30 seconds and then stop? //Devotee007
-
@Shaun: Thanks a lot for the fast help, it works great!
-
Hi, My first post here, I guess it's a real newbie one... I searched and couldn't find any post with this question, so I hope it's ok. What I try to do is to have a div expand from the bottom up, but I can only get it to expand from top to bottom. How can I reverse this? //Devotee007 CSS: .wrapper { position:absolute; top:40px; left:40px; width:430px; height:0px; z-index:1; background-color:#000; overflow:hidden; } TweenMax.to(".wrapper", 1.2, {height:"430px", ease:Expo.easeOut});
