Literally first GSOP animation not working

[irdchr 0 Likes (Newbie)]

This is literally my first animation with GSOP, I have some understanding of Js and a good grasp on HTML and CSS but I am confounded. I have been trying to get this to work for the better part of an hour to no avail. Thank you for any help. Sorry, to clarify I know that the image isn't loading in the pen, but I'm mostly concerned for the animation. The image loads fine on my computer because that's where it's source is. 

See the Pen EbobXR?editors=1111 by irdchr (@irdchr) on CodePen

[irdchr 0 Likes (Newbie)]

I also apologize preemptively becaue I know it's something so obvious I am missing. 

[Carl 9,066 Likes (Superhero)]

Hi and welcome to the GreenSock forums.

 

Thanks for the demo.

In order to change the top, left, right, or bottom values you need to give the element a css position property first.

This is necessary even without GSAP.

 

If you add to your css:

.logo {
	top:200px;
}

 

You will notice that the top value doesn't change.
 

But if you add position:relative it works.

 

.logo {
  	position:relative;
	top:200px;
}

 

here is a fork of your demo with the fix

 

See the Pen vWppNG by GreenSock (@GreenSock) on CodePen

 

 

 

[khagedra 0 Likes (Newbie)]

Hi i am using scroll magic and TimelineMax and but the element is animating endlessly and even without getting into the view please help?

 

here is my codepen link: 

See the Pen MMvroB by twinklek55 (@twinklek55) on CodePen

[PointC 8,599 Likes (Superhero)]

That wacky jump is from your pin on line 53. If you remove it, that goes away. Beyond that I'm not really sure what should be happening here.

 

Is there a specific GSAP question? It's usually best to start a new thread so we can better assist you.

 

Happy tweening.

[khagedra 0 Likes (Newbie)]

i am trying to fade out the id of portfolioText and animate x position of :before property of portfolio class 

[Visual-Q 586 Likes (Leader)]

You appear to be telling portfolio text to go "to.....{opacity:1} if you want to fade out you want to go to opacity:0  - see also gsaps autoAlpha

 

Though your x animation appears to be on the portfolio text item not on :before it's worth noting pseudo elements (i.e. ::before) can't have inline styles so I don't believe gsap can directly animate them. You would need to animate something that affects the position of the pseudo item instead. Or better yet refactor your html so it isn't a pseudo element if possible.

 

I've never attempted scrollMagic with horizontal scrolling but your pins do seem to be problematic: I would suggest you visit scrollMagic forum and docs with questions as it is not a gsap product and see:

 

https://scrollmagic.io/examples/basic/going_horizontal.html

 

 

[PointC 8,599 Likes (Superhero)]

Here's a basic horizontal scroll from a different thread. Maybe it'll help you, but ScrollMagic is not a GreenSock product.

 

See the Pen vayLYy by PointC (@PointC) on CodePen

 

ScrollMagic also has a premium support area now:

https://support.scrollmagic.io/

 

 

[Visual-Q 586 Likes (Leader)]

29 minutes ago, PointC said:

Here's a basic horizontal scroll from a different thread.

 

Clever how you did that, I will have to steal it.?

[khagedra 0 Likes (Newbie)]

i have edited it and added new things but still the TimelineMax animation is not working feel free to edit the code since i am a beginner with GSAP

 

See the Pen zVEjxW by twinklek55 (@twinklek55) on CodePen

 

and the anchor based scroll is working but the console is throwing some errors such as  " Uncaught TypeError: ".slides_panel".width is not a function" if i remove that i doesn't work but if i leave it as it is it works but throws this error please help me with this.

 

thanks

[Visual-Q 586 Likes (Leader)]

You don't need to load all those gsap files Tweenmax should do it for you. It includes timelinemax and cssPlugin, and you may find it easier to load those scripts in the settings rather than html on codepen. You might want to start from the starter pen.

 

 

https://greensock.com/tweenmax

 

Make sure you have included jQuery before the other scripts and use proper syntax for using .width() method

 

$('.slides_panel').width()

 

https://api.jquery.com/width/

 

You should also probably not mix versions of scrollMagic make sure it's all 2.0.7

[PointC 8,599 Likes (Superhero)]

I don't know if it's just me, but this demo really bogs down. I see some monster size .pngs in there.

 

Maybe try to simplify things a bit. The less convoluted the demo the better. We can't get too deep into ScrollMagic or general coding help, but anything GSAP related is fine.  

[Visual-Q 586 Likes (Leader)]

Yeah it would be a lot easier to understand if you got rid of all the graphics for now and just simplified it to the basic elements you are having difficultly with. Once you get it working then you can add them back in.