[Carousel with TweenLite and JS only, cannot tween a null target]

Wow awesome, thank you very much guys !

 

@pixeldroid, I thought that if I have i < obj.length it assumes that if obj is a size of 5, i stop at 4. My bad and thx for the elementary lesson haha

 

And thank you again Diaco for this codepen

[Carousel with TweenLite and JS only, cannot tween a null target]

Hi everyone !

 

Hope you are fine.

 

I come to you because I am trying to make a carousel with images fading in / out.

I decided to use opacity (maybe it's not the best way to do it) and JS. I succeed to do something with JQuery but the performance were a disaster. Made my browser (chrome) crash.

 

Then I decided to make it with javascript and tried to realise something as light as possible (hard task).

 

But, when I thought my algorithm was good I was in front of 2 problems :

 

1) I don't succeed to make it infinite (not too hard to do)

2) I have an error during a loop : Cannot tween a null target.

 

I put some console.log everywhere at every stage but impossible to localise the moment where I am sending a null object to TweenLite. Dafuq

 

So, as you will see in my (short) codepen, am I missing something ?

 

 

I deeply thank you in advance for the time spend on my request.

See the Pen gapKjJ by anon (@anon) on CodePen

[drawSVG, trying to make something simple but nothing happen]

Just one more question :

 

is it possible to really "draw" the svg ? I mean. This is a drop about to fall, it is possible to draw the curve then the line then bottom ?

 

Or do you expect too much from svg animation haha ? cuze I saw that a lot of time dev played only with the size of the svg..

[drawSVG, trying to make something simple but nothing happen]

Aww awesome, I didn't now ! Thank you very much Carl.

[drawSVG, trying to make something simple but nothing happen]

Hi !

 

It's me again..

 

Now I am trying to draw a SVG from what a designer gave me.

 

But, I tried something very simple from the video and as you will see in the codepen, nothing happen...

 

I don't know why, can someone help ?

See the Pen mebdmB by anon (@anon) on CodePen

[Trigger a light animation after a scrollMagic scene]

Yes fair enough haha !

 

The problem is that, when I try to trigger tweenmax on a onComplete from a scrollmagic scene, the behaviour is quite strange.

 

Thank you for answering Rodrigo !

[Trigger a light animation after a scrollMagic scene]

Hi everyone,

 

hope you are fine.

 

 

I am getting better and better with scrollMagic / gsap but when I am thinking about doing something simple, it's always giving me a hard time.

 

I choose to use ScrollMagic with GSAP because I have some sprite to use with a parallax effect. Instead of losing you with too many code lines, go straight to the point,

 

here is my codepen demo :

 

 

In this example you can see a simple square that change to position fixed with new background-color.

 

The thing is, at the end of the scrolling scene, I want my square to go "slowly" (1seconde animation) at the left of the screen with animation. Then it has to stay "absolute" of section if you continue on scrolling down.

 

But as you know, if you scroll back you are supposed to have your animation going back, and I am lost about it.

 

Thank you in advance for reading my post and maybe help me !

See the Pen bdXqzw by anon (@anon) on CodePen

[Sprite sheets, tweenmax question on scroll]

Ok finally it was not that hard to handle !

 

Thank you very much ochalmers, it helped a lot !

[Sprite sheets, tweenmax question on scroll]

Oh not bad ochalmers, I will try it!

[Sprite sheets, tweenmax question on scroll]

Ok, there is an other demo of what I tried :

play the whole animation on scroll and stop it if you don't scroll anymore.

 

But the result is quite a disaster...

 

See the Pen LVKjOq by anon (@anon) on CodePen

[Sprite sheets, tweenmax question on scroll]

Thank you for your quick answer Diaco !

 

Ok if it can help ! I edited my first post in order to provide the codepen.

 

thanks for the scrollmagic code pen (but nothing happen, is it normal ?)

[Sprite sheets, tweenmax question on scroll]

Hi everyone, hope you are fine !

 

I come today with a new question about tweenmax.

 

I have a earth to make rotate while the user is scrolling (position fixed). Then the earth has to transform in an other item.

 

Well, after some research on your forum I discovered that you can have something fluent and nice with sprite sheets. and this function :

TweenMax.to(obj, 0.2, {x: "-=1194px", ease:SteppedEase.config(3)});

Sooo I have 20 images in my sprite for a width of 7960px.

 

The thing is, when I am rotating while scrolling, I can't do something like :

 

x: "+= scrolling value". If I am not in good proportions the animation is broken.

 

But in the meantime, if I scroll to a maximum position the animation has to be completed before transforming in an other object !

 

So I decided that each time I scroll, I will send 1194px to x, that correspond to 3 images. But, if you scroll very slowly you won't arrive in the next image's area before the end of spinning animation!

 

Do you have some idea or tips of how I can synchronize tweenmax with a scroll ?

 

I am hesitating about using scroll magic but I am afraid that it will use a huge amount of time to implement / masteries.

 

EDIT: here is a codepen I made.

See the Pen VLJWrX by anon (@anon) on CodePen

[Is it possible to manage .obj (3d model) with GSAP]

Ok thank you Carl !

[How did you convince your front end team to stop using CSS and go greensock]

 

never want to go back to CSS or other libraries

 

Hehe.

 

True.

[Is it possible to manage .obj (3d model) with GSAP]

Hi,

 

hope everyone's fine.

 

I have to load and do some transformation on a 3d model .obj and after some research I found those stuffs :

 

1) This super tuto from January (but it's using 3daway, and 3daway is a flash lib...)

 

2) Three.js but as I am already using GSAP a lot - if possible - I would like to avoid adding an other library. And I would have to convert the .obj..

 

 

Then, my question is quite simple, is there a way to manage external 3D objects with GSAP ?

 

 

Thank you in advance for the time spent on my request,

 

 

cheers

[Using LoaderMax to Load Away3D Content]

Wow thank you so much, I have to animate a 3D earth and I don't want to use three.js

 

Hope this will work.

 

Cheers