Jump to content
Search Community

Literally first GSOP animation not working

irdchr test
Moderator Tag

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

Link to comment
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
Link to comment
Share on other sites

  • 1 year later...

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
Link to comment
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
Link to comment
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

Link to comment
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
Link to comment
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
Link to comment
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
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...