Jump to content
GreenSock

Sumit_95

Gsap isn't working

Go to solution Solved by PointC,

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

I am beginner and I want to use gsap and scrollmagic in my project. But as I am using CDN it isn't working at all. Nothing moves. Help me please. What shall I do ? Why there's no animation???? Reply me with totally basic code, help.me. thank you.

Link to comment
Share on other sites

Hi Sumit_95 :)

 

Welcome to the GreenSock forum.

 

You'll need to give us some specifics before we can help. What's not working? GSAP or ScrollMagic? We'd really need to see your code. Could you please make a us a demo? Here's some info about that.

 

https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

If you like, I have an empty CodePen that already loads jQuery, GSAP and all the ScrollMagic files that you can fork here:

 

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

 

Thanks and happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

I'd used may things and many ways. First i learnt and implemented, it wasnt working then i copied each and every code from internet. Followed "ihatetomatoes" and all his tutorials. But, it isn't working.

 

 

See the Pen MpVPxK by sumit_95 (@sumit_95) on CodePen

 

this what i did, please help me.

<!DOCTYPE html>
<html>
<head>
	<title>Rooms Hourly</title>
	<link rel="stylesheet" type="text/css" href="animate.css">
        <link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Snippet" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans" rel="stylesheet">
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="newtry.css">
        <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
        <link rel="shortcut icon" href="key.png" />
        <!-- Bootstrap CDN -->

        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
<script src="js/app.js"></script>
<script src="newtry.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenLite.min.js"></script>

</head>
<body>

<div class="parallax slide" id="parallax">
	<div class="row">
        <h1>ROOMS HOURLY</h1>
    </div>
</div>
 
<div class="slidein slide" id="slidein">
    <div class="row">
        <h1>Slide and pin</h1>
    </div>
</div>
 
<div class="slidein2 slide" id="slidein2">
    <div class="row">
        <div id="left">
            <h1>From left</h1>
        </div>
        <div id="opacity">
            <h1>Fade in</h1>
        </div>
        <div id="bottom">
            <h1>From bottom</h1>
        </div>
    </div>
</div>

</body>
</html>
body {
    margin: 0;
    font-family: sans-serif;
}
 
.slide .row {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    color: white;
    text-align: center;
}
 
.intro {
    background: #305a5b;
}
 
.parallax {
    background: 50% 0,url(bg50.png);
}
 
.slidein {
    background: #5b3030;
}
 
.slidein2 {
    background: #304b5b;
}
 
.slidein2 .row {
    justify-content: space-around;
}

$(document).ready(function(){
	//init ScrollMagic
	var controller = new ScrollMagic.Controller();

	//build a scene
	var ourscene1 = new ScrollMagic.Scene({
		triggerElemet: "#parallax",
		triggerHook: "onEnter";
	});
	.duration('200%');
	.setTween("parallax", {
		backgroundPosition: "50% 100%",
		ease: Linear.easeNone
	});
	.addIndicators();
	.addTo(Controller);

	var ourscene2 = new ScrollMagic.Scene({
        triggerElement: "#slidein",
        triggerHook: "onLeave",
    });
    .setPin("#slidein");
    //.addIndicators() // add indicators (requires plugin)
    .addTo(controller);
 
var ourscene3 = new ScrollMagic.Scene({
        triggerElement: "#slidein2",
        triggerHook: "onLeave",
    });
    .setPin("#slidein2");
    //.addIndicators() // add indicators (requires plugin)
    .addTo(controller);
});

Help me @PointC

Link to comment
Share on other sites

Hi Sumit_95,

 

Welcome to the forum!

 

There are several errors on your JavaScript, mainly tokens where they shouldn't be. Lot's of semicolons ";" when you are trying to chain methods. Have a look at the little red exclamation mark on the bottom right of your JS window in your pen and click it, it will show where the error are.

 

Another thing is that you don't have to put all the <html> <body> <scripts> into your Pen. CodePen does all of that for you. In your HTML panel, you really only need to have what's inside the <body> tag. 

 

Have you tried following the examples in the ScrollMagic site? Here's their basic one: http://scrollmagic.io/examples/basic/simple_tweening.html

 

We don't officially support ScrollMagic here at the GSAP forums but there are many threads regarding it, have you had a look at the other threads in the forums? https://greensock.com/forums/index.php?app=core&module=search&section=search&do=search&fromsearch=1

 

Finally, what is the simplest thing you are trying to achieve? I am not sure what you are trying to animate and your post is not very descriptive. What and how are you trying to animate?

 

Here is a not-that-simple example I made for another thread here in the forums. Maybe it will help you: 

See the Pen ENgvRw by dipscom (@dipscom) on CodePen

  • Like 4
Link to comment
Share on other sites

As Dipscom mentioned, we keep the support here on GSAP and this is really a ScrollMagic issue. 

 

That being said, I don't mind answering short questions about it. You did have several syntax errors in your code which I've fixed in my fork of your pen.

 

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

 

The background image for your parallax section is missing so I added a a simple color to the background for demo purposes. I've added a fade tween to section 1 and a pin to section 2. That should give you a good basis to get started on the rest of your project.

 

I'd recommend watching Petr's getting started video again and watch closely where the semicolons and commas go in the code.

 

https://ihatetomatoes.net/scrollmagic-tutorials-for-complete-beginners/

 

If you have questions directly related to ScrollMagic, you can post them here:

 

https://github.com/janpaepke/ScrollMagic/issues

 

If you have additional questions about GSAP, we'll be glad to help.

 

Happy tweening.

:)

  • Like 4
Link to comment
Share on other sites

Hi Dipscom, I have seen all examples of ScrollMagic , i have tried it on my laptop. But it wasnt working. So i thought of to go with GSAP

But again GSAP wasnt working. I have tried the basic of gsap. But still the same.

 

OK! Sorry, i wont ask issues regarding ScrollMagic. But what if i had any issue ?

 

Sir, i need parallax effect on my home page. And some text animation(Fade in, fade out etc..) which will be based on my scroll.

Link to comment
Share on other sites

Hi PointC,

Thanks a lot sir.

You helped me alot. i would like to be in touch with you further.

I did a mistake in javascript ?

as i copied the code from internet.

I need to learn a lot.

 

Mainly i need Parallax effect on my home page and some scroll animations on my texts.

thats it.

Link to comment
Share on other sites

PointC,

I have copied your code for learning purpose, and i'd run.

but sir it really isnt working on my laptop.

I have used maxcdn , i don't know what's wrong, but seriously isn't working :(

Help me

Link to comment
Share on other sites

You should be able to fork my pen to get started. I would have made the first tween a parallax, but the image for your pen was missing so I just used a background color fade. All you need to do is change the animation in tween1 to whatever you want your background image to do.

// make this tween do whatever you want with your background image
var tween1 = TweenMax.to("#parallax", 1, {backgroundColor: "black"});

Yes - JavaScript can be a bit confusing at first. Putting semicolons where you should have commas can certainly break things quickly. A fork of my pen should get you started, but if you have GSAP related problems, we're here to help.

 

Happy tweening.

:)

Link to comment
Share on other sites

If it's not working locally, my guess would be that you're missing some scripts. Make certain you're loading GSAP and all the ScrollMagic scripts.

Link to comment
Share on other sites

Ok thanks again.

What i need to use gsap on my laptop ?

i think there's an maxcdn issue, if it isn't then which files of should i link to my html ?

Seriously it isn't working on my PC

Link to comment
Share on other sites

SCROLLMAGIC

<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>

 

GSAP

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>

 
if i want to manually load the script files, then which are those ? can you name it ??
Link to comment
Share on other sites

You're missing one:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script> 

Happy tweening

:)

Link to comment
Share on other sites

uhmm, i feel ashame take help :/

again and again.

but sir, it isn't working :(

i have added the above link, nothing is happening.

it loads css but not javascript

Link to comment
Share on other sites

  • Solution

Try this. Go back to the CodePen and export it. That will give you all the files from the pen and you can compare it to your local version and see what's different. Just click the export button on the bottom and you can download a zip file with the entire demo.

 

eVsUlIN.jpg

 

Happy tweening.

:)

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

You're welcome. Glad to hear that it's working for you. Good luck with your project.

 

Happy tweening.

:)

  • Like 1
Link to comment
Share on other sites

Hi Sumit_95,

 

It is not that you cannot ask about Scrollmagic, it's more that the resources are limited for support and we can't realistically cover things outside GSAP. We would be overwhelmed.

 

Having said that, as Point_C has pointed out ( double point! Triple score :D ) there are plenty of people who are happy to chip in, offer advice and help. Just have in mind that comes from people's own time.

 

I am happy to see that you have found the solution to your problem. Please come back if you ever think you need a hand.

 

Happy Tweening!

  • Like 2
Link to comment
Share on other sites

  • 5 years later...

Hi,

 

i am stuck on toggle feature using gsap. Could you please help me with my issue whole code you can find here: 

See the Pen abqLYKr by michalruml (@michalruml) on CodePen

 There is simple question and after click on a element it should add class active and display answer.

 

Thanks for any help

Mike

Link to comment
Share on other sites

@Mike71 it looks like you were just loading a REALLY old version of TweenMax (but you were using the more modern GSAP 3 syntax). Just load a recent version of GSAP and it seems to work fine. Like https://unpkg.co/gsap@3/dist/gsap.min.js

 

See the Pen oNEGPpZ?editors=0010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Hi GreenSock,

 

thanks a lot for you quick response. It is working in codepen but sadly not on my local in wp theme. I spent almost 3 hours to figure out why it is not loading but still stuck.

 

Have a nice day,

Mike

Link to comment
Share on other sites

It's pretty tough for us to troubleshoot blind - do you have a link to your site? Are you seeing any errors in the console? It really should be as simple as loading the GSAP core file in a <script> tag. I wonder if maybe you put your GSAP-related code in your <head>, before any of the elements that you're trying to animate even exist? You could put your gsap code into window onload event handler

Link to comment
Share on other sites

Not yet i have it only on my local i tried everything i placed these two .js files into header, footer nothing helped. I can see that both js files are loaded correctly in source code but event listener does not work. :(

Link to comment
Share on other sites

Hey there - That's still the old GSAP file. (TweenMax)

Can you try loading this in the footer

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js" integrity="sha512-VEBjfxWUOyzl0bAwh4gdLEaQyDYPvLrZql3pw1ifgb6fhEvZl9iDDehwHZ+dsMzA0Jfww8Xt7COSZuJ/slxc4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

 

  • Like 1
Link to comment
Share on other sites

HELLO,

 

I LOVE YOU IT IS WORKING THANK YOU VERY MUCH.

  • Like 1
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.
×