Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Dj.Sunrise

GSAP not working after server upload

Recommended Posts

Hey Dj.Sunrise and welcome. 

 

First off, you're loading a really old version of GSAP. We highly suggest migrating to GSAP 3 which has a smaller file size, a sleeker API, and a bunch of new features! Upgrading is easy!

 

Second, we don't recommend ScrollMagic and don't support it here. Instead we recommend the official scroll plugin: ScrollTrigger! It's better in every way.

 

I am betting that if you migrate to GSAP 3 and ScrollTrigger, make sure to register ScrollTrigger, and avoid the most common GSAP mistakes and most common ScrollTrigger mistakes, it will work :) 

  • Like 1
Link to comment
Share on other sites

@ZachSaucier ok nice i've added the latest green sock version. But I spent 3-4 hours I can't get how to migrate from scrollmagic + old gsap to NEW one.
 

        // init controller
        var controller = new ScrollMagic.Controller();

        // Entry TimelineMax
        var mainScene = new TimelineMax();
        mainScene
            .fromTo(".entry__table-stand", 5,{ autoAlpha: 0, left:'90%', },{ autoAlpha: 1, left: '37%' })
            .to('.entry__first-hand', .1, {opacity:"0"})
            .to('.fakeDiv', 4, {opacity:"0"}); // this one need for a fake 4 sec pause on main section

        // Entry Scene
        new ScrollMagic.Scene({
            triggerElement: "#entry",
            triggerHook: 0,
            duration: '150%',
        })
            .setPin("#entry")
            .setTween(mainScene) // set table stand tween
            .addIndicators({
                name: "Entry Scene"
            })
            .addTo(controller);


        // Pinned Phone TimelineMax
        var pinnedPhoneScene = new TimelineMax();
       pinnedPhoneScene
            .set('.entry__pinned-hand', {opacity:"1"})
            .to('.entry__pinned-hand', .1, {display: 'block'})

      // Pinned Phone Scene
      new ScrollMagic.Scene({
          triggerElement: "#hiw",
          triggerHook: 1,
          duration: $('#hiw').height() + 70, // pin element for the window height + 70
      })
          .setTween(pinnedPhoneScene) // set table stand tween
          .setPin(".entry__pinned-hand", {pushFollowers: false})
          .addIndicators({
              name: "Pinned Phone Scene"
          })
          .addTo(controller);

        // Features TimelineMax
        var featuresScene = new TimelineMax();
        featuresScene
            .to('.hiw__item.--a', 3, {scale:'1', opacity: '1'}, 1)
            .to('.hiw__item.--b', 3, {scale:'1', opacity: '1'}, 2)
            .to('.hiw__item.--c', 3, {scale:'1', opacity: '1'}, 3)
            .to('.hiw__item.--d', 3, {scale:'1', opacity: '1'}, 4)
            .to('.fakeDiv', 4, {opacity:"0"}); // this one need for a fake 4 sec pause on main section

        // Features Scene
        new ScrollMagic.Scene({
            triggerElement: "#hiw",
            triggerHook: 'onEntry',
            duration: '100%', // pin element for the window height + 70
            offset: -150
        })
            .setTween(featuresScene) // set table stand tween
            //.setPin('#hiw') // set table stand tween
            .addIndicators({
                name: "Features Scene"
            })
            .addTo(controller);


Only what I understand that's:
 

        // init controller
        gsap.registerPlugin(ScrollTrigger);

        // Entry TimelineMax
        const mainScene = gsap.timeline({
            // This code is wrong. it doesn't work properly
            scrollTrigger: {
                trigger: "#entry",
                pin: true,   
                start: "top top", 
                end: "bottom",
                scrub: 1,
            }
        });

        mainScene.addLabel("start")
            .fromTo(".entry__table-stand", 5,{
                autoAlpha: 0,
                left:'90%',
            },{
                autoAlpha: 1,
                left: '37%'
            })
            .to('.entry__first-hand', .1, {
                opacity:"0"
            })
            .to('.fakeDiv', 4, {
                opacity:"0"
            }); // this one need for a fake 4 sec pause on main section


Questions:
1) How to Pin/scrollable/fixed first section until animations on first section ends

2) How to Pin Hand with phone from first section to the end of the second section.

3) While hand with phone reaches bottom of the second section it swapes to other screenshot.

4) Then I need start new timeline hiw__item.--a, hiw__item.--b, hiw__item.--c, hiw__item.--d appears one by one (also second section is pinned)

Link to comment
Share on other sites

I think it would be much more productive if you just focused on one small thing at a time, and build it up from there instead of trying to rework your entire project. We just don't have the resources to troubleshoot a live site and do all the conversion for you, but we'd be happy to answer any GSAP-specific questions, especially when you provide a minimal demo.

 

For example, just try to get one animation linked up with the scroll position the way you'd like, then start adding things from there and when you get stuck, ask your question here. 

 

I think you'll find that ScrollTrigger is even easier to work with than ScrollMagic. Did you already watch the video and look at the docs? There are a LOT of CodePen demos that show you exactly how to accomplish various things. 

 

And again, you'll definitely have the best chance of getting good answers here if you provide a minimal demo in CodePen or something like that. 

 

Happy tweening!

  • Like 1
Link to comment
Share on other sites

15 minutes ago, Dj.Sunrise said:

@GreenSock okay should I create new topic when my codepen demo will be ready? Or it's better here?

If it's directly related to this thread, keep it here so that people can see the history (in case it helps give context). If not, please start a new thread. 

  • Like 2
Link to comment
Share on other sites

1 hour ago, GreenSock said:

If it's directly related to this thread, keep it here so that people can see the history (in case it helps give context). If not, please start a new thread. 

 

Here is codepen demo 

See the Pen WNozxQJ by AlibekKulseitov (@AlibekKulseitov) on CodePen

 

So we have 3 states of Hand With Phone. 

a. https://imgur.com/rtx3u86 (screen 1)

b. https://imgur.com/6RsJsmi (screen 2)

c. https://imgur.com/653cwDM (screen 3)

 

What I'm trying to do:

1) I did transition from (sreen 1) to (sreen 2) so stupidly :D . Is there a way to make it correclty instead of my method?

2) While we leaving first section (screen 2) needs to pin from bottom of the first section to the bottom of the second section 

3) When we reached bottom of the second section (screen 2) needs change to (screen 3) 

4) After 1-2 seconds activates new TimeLine, "hiwScene" << this const from codepen.  Also Second section have to be pinned while four yellow steps won't show up.

 

I spent much time to do that with Scroll Magic + Gsap. Now I see GSAP 3 is much better! But a bit confusing.. 

Would be good if I will get some help 😃

 

Link to comment
Share on other sites

2 hours ago, Dj.Sunrise said:

1) I did transition from (sreen 1) to (sreen 2) so stupidly :D . Is there a way to make it correclty instead of my method?

I don't know what you mean - what is "correctly"? I'm not sure how it's supposed to animate (differently). 

 

2 hours ago, Dj.Sunrise said:

2) While we leaving first section (screen 2) needs to pin from bottom of the first section to the bottom of the second section 

I read this a few times and I still don't know what you mean, sorry. 

 

2 hours ago, Dj.Sunrise said:

3) When we reached bottom of the second section (screen 2) needs change to (screen 3) 

Again, I don't know what "needs to change to screen 3" means. How? There are infinite ways one screen could change to another. 

 

2 hours ago, Dj.Sunrise said:

4) After 1-2 seconds activates new TimeLine, "hiwScene" << this const from codepen.  Also Second section have to be pinned while four yellow steps won't show up.

It looks like you have the wrong trigger in your hiwScene timeline - shouldn't it be trigger: ".hiw" and pin: true and start: "top top"?  

 

I think the best way to approach this is ONE thing at a time. Why don't you just create a CodePen that only does the first step? Once you're successful with that, we can move to the next step, and so on. I think you might be trying to do too much too fast without understanding some of the fundamentals. And it's too hard to troubleshoot when you're trying to describe 4 different things that have to happen. 

  • Like 1
Link to comment
Share on other sites

16 hours ago, GreenSock said:

I don't know what you mean - what is "correctly"? I'm not sure how it's supposed to animate (differently). 

 

I read this a few times and I still don't know what you mean, sorry. 

 

Again, I don't know what "needs to change to screen 3" means. How? There are infinite ways one screen could change to another. 

 

It looks like you have the wrong trigger in your hiwScene timeline - shouldn't it be trigger: ".hiw" and pin: true and start: "top top"?  

 

I think the best way to approach this is ONE thing at a time. Why don't you just create a CodePen that only does the first step? Once you're successful with that, we can move to the next step, and so on. I think you might be trying to do too much too fast without understanding some of the fundamentals. And it's too hard to troubleshoot when you're trying to describe 4 different things that have to happen. 

Okay let's do it step by step.  The first question was about swapping images. (screen 1) to (screen 2) but I google it and found your answer there

You says about opacity etc. like i did. Ok I think that's normal way and first question is solved.

 

Let's take a look at pinned phone. I already explained how it should work. I've uplodad gif for better understanding https://imgur.com/a/ZFOz4Ba
I Need it to be pinned from first to second section.

Link to comment
Share on other sites

23 hours ago, Dj.Sunrise said:

Let's take a look at pinned phone. I already explained how it should work. I've uplodad gif for better understanding https://imgur.com/a/ZFOz4Ba
I Need it to be pinned from first to second section.

Are you saying you want it to be covered by the new section? There are demos in the ScrollTrigger demos section that show how to do that sort of thing. 

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.
×