Devotee007

September 7, 2018

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?

See the Pen yYBpVY by giana (@giana) on CodePen

January 29, 2018

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

December 5, 2017

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

November 20, 2017

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

November 13, 2017

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

November 10, 2017

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

June 13, 2017

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.

June 1, 2017

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

May 31, 2017

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.

January 16, 2017

Thanks for your input! I will try and go with SVG.

//Devotee007

January 13, 2017

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

January 20, 2016

Thanks for clearing it up, PointC, I'm quite new at this. I will consider getting a membership, Greensock is really awesome!

//Devotee007

January 19, 2016

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

January 19, 2016

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

November 26, 2015

Thank you! I see that I was on the right track, but not quite...

November 26, 2015

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>

October 8, 2015

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

September 4, 2015

Hi Carl,

Thanks for the links, I will ask there.

//Devotee007

September 3, 2015

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

August 27, 2015

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

August 26, 2015

Hi,

Is there a away to loop through a set of animations for, let's say 30 seconds and then stop?

//Devotee007

August 24, 2015

@Shaun:

Thanks a lot for the fast help, it works great!

August 22, 2015

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});

Notifications

Messages

Devotee007

Posts

Joined

Last visited

Content Type

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by Devotee007

Animate :after

which is the best way to animate css background-position property?

Delay clickTag

Delay clickTag

Changing fontSize

Changing fontSize

Image sequence flickering?

Rotate text like a3D cube

Rotate text like a3D cube

Text animation

Text animation

Stagger from center object and out?

Stagger from center object and out?

Stagger from center object and out?

Rotate object in a circle

Rotate object in a circle

Trying to loop a TimelineMax from certain point

Flash Professional HTML5 Canvas export with GSAP

Flash Professional HTML5 Canvas export with GSAP

Stop looping banner after a set amount of seconds?

Stop looping banner after a set amount of seconds?

Expand div from bottom to top?

Expand div from bottom to top?