Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
irdchr

Literally first GSOP animation not working

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

 

 

  • Like 4

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

 

  • Like 1

Share this post


Link to post
Share on other sites

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/

 

 

  • Like 1

Share this post


Link to post
Share on other sites
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.?

  • Haha 2

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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.  

  • Like 2

Share this post


Link to post
Share on other sites

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.

  • Like 2

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×