Jump to content
Search Community

#WIP Website

miks 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

Hi Guys,

Anyway, this is my first gsap project that was so ambitions for me but I am trying to learn and happy with gsap modernization of web animation and in advance thanks for your all hard work.

Currently I'm working on my companies website. Here is the work in progress. 
https://dev.creativelabs.com/

 

Note: Im still fixing the previous function.

Any comments and suggestion please.

Also I am having trouble on using mouse scroll cause it fires multiple times during the reverse whenever I fire it during reverse. But after the reverse is complete or the animation if I fire multiple scroll it doesn't fire multiple scroll. Happy to share my github repo for this. 

I hope you could help me.

Cheers!

Link to comment
Share on other sites

Actually, Im struggling on reversing the animation to go to previous slide scroll function. Cause whenever I assign the current animation to reverse it will go to the onReverseComplete which is the function below. I will try to make a pen for this.
 

var leftContent = new TimelineLite({paused:true, onReverseComplete:pushNext});
Link to comment
Share on other sites

 

I also wonder what would be the best approach on this on animation each section? Cause I feel some delay cause it was running throughout the if statement before running it.

Link to comment
Share on other sites

Would you mind stating your question more succinctly? The demo has 120+ lines of code and I don't quite understand what you were hoping we'd help you with exactly. A quick glance at the code does seem like it's over-engineered maybe. There's probably a much easier way to do what you're attempting, but I'm not entirely clear on what your goal is. 

 

Do you have a GSAP-specific question we can help you with? 

  • Like 3
Link to comment
Share on other sites

Regarding the if statements: 

 

if all the animations they are executing are the same then you should be able to replace the ifs with just a single selector for the active slide shown at the bottom. That's kind of the point of adding a class like active so it's selectable.

 

tl.set($currentSlide,{autoAlpha: 0,className:'-=active'})
    tl.set($nextSlide,{autoAlpha: 1,className:'+=active'});
  tl.play(); 

if($nextSlide.index()==0&&$nextSlide.hasClass('about')){
      var aboutH1 = $('.about h1');
      slideAnim.to(aboutH1,0.5,{x:300},'-=0.5');
      slideAnim.play();
    
  }else if($nextSlide.index()==1&&$nextSlide.hasClass('team')){
      var teamH1 = $('.team h1');
      slideAnim.to(teamH1,0.5,{x:300},'-=0.5');
      slideAnim.play();
    
  }else if($nextSlide.index()==2&&$nextSlide.hasClass('case')){
      var caseH1 = $('.case h1');
      slideAnim.to(caseH1,0.5,{x:300},'-=0.5');
      slideAnim.play();
    
  }

// if all the above animations are the same then you should be able to replace the ifs with just a single selector for the active slide 

slideAnim.to(".active h1",0.5,{x:300},'-=0.5');
      slideAnim.play();

 

  • Like 3
Link to comment
Share on other sites

If you see the same code a few times, there's almost always a way to turn it into a function or loop. I'd agree with Jack in that this may be a bit over-engineered and I wonder if this thread may help.

 

It's not exactly the same as your project, but you want the active animation to reverse before the new one plays and that's similar to what's happening in that thread. @Carl has a really nice simplified example of code and @Sahil followed up with some nice additions to the project. I think studying those examples could help.

 

Happy tweening.

:)

 

  • Like 4
Link to comment
Share on other sites

8 hours ago, Visual-Q said:

Regarding the if statements: 

 

if all the animations they are executing are the same then you should be able to replace the ifs with just a single selector for the active slide shown at the bottom. That's kind of the point of adding a class like active so it's selectable.

 


tl.set($currentSlide,{autoAlpha: 0,className:'-=active'})
    tl.set($nextSlide,{autoAlpha: 1,className:'+=active'});
  tl.play(); 

if($nextSlide.index()==0&&$nextSlide.hasClass('about')){
      var aboutH1 = $('.about h1');
      slideAnim.to(aboutH1,0.5,{x:300},'-=0.5');
      slideAnim.play();
    
  }else if($nextSlide.index()==1&&$nextSlide.hasClass('team')){
      var teamH1 = $('.team h1');
      slideAnim.to(teamH1,0.5,{x:300},'-=0.5');
      slideAnim.play();
    
  }else if($nextSlide.index()==2&&$nextSlide.hasClass('case')){
      var caseH1 = $('.case h1');
      slideAnim.to(caseH1,0.5,{x:300},'-=0.5');
      slideAnim.play();
    
  }

// if all the above animations are the same then you should be able to replace the ifs with just a single selector for the active slide 

slideAnim.to(".active h1",0.5,{x:300},'-=0.5');
      slideAnim.play();

 


Thanks for pointing it out. But as you can see on this http://dev.gcreativelab.com/ I have a different animation for each slide.  On the pen, I just did an h1 just to see whats happening on every scroll.

Link to comment
Share on other sites

9 hours ago, GreenSock said:

Would you mind stating your question more succinctly? The demo has 120+ lines of code and I don't quite understand what you were hoping we'd help you with exactly. A quick glance at the code does seem like it's over-engineered maybe. There's probably a much easier way to do what you're attempting, but I'm not entirely clear on what your goal is. 

 

Do you have a GSAP-specific question we can help you with? 

 


I really wanted to simplify code cause I think it affects the speed of my animation.  My goal here is that whenever I scroll on the active slide it should reverse the animation first before it goes to the next slide and plays the next slide animation. I wonder if I could store all the animation in 1 function. Cause right now I have a previous and next function that duplicates all the animation for each slide.

Link to comment
Share on other sites

7 hours ago, PointC said:

If you see the same code a few times, there's almost always a way to turn it into a function or loop. I'd agree with Jack in that this may be a bit over-engineered and I wonder if this thread may help.

 

It's not exactly the same as your project, but you want the active animation to reverse before the new one plays and that's similar to what's happening in that thread. @Carl has a really nice simplified example of code and @Sahil followed up with some nice additions to the project. I think studying those examples could help.

 

Happy tweening.

:)

 


I'm not sure how can I implement the each() function for my next and previous function. Thanks!

Link to comment
Share on other sites

Here is a new version of what I wanted to achieve. But I still feel some lag even though the code is shorter.

I know every animation should run at the same speed forward or reverse because they all have the same property animation but on this one, it doesn't.
 

See the Pen xjjBba by miksv (@miksv) on CodePen

 

Link to comment
Share on other sites

The perceived lag is coming from the timeline duration increasing each time your slideAnimate() function fires. Check out this fork of you pen.

 

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

 

Keep scrolling your mousewheel over it. See how the duration keeps increasing? There is no lag or delay. You're just making the timeline longer. I think your best bet here is to create a timeline for each slide and assign the active one to a variable much like @Carl's demo here:

 

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

You can assign the active slide to that variable, reverse it on a mouse wheel event and then assign the new timeline as current and play() it when the reverse is complete. You also have a problem with interrupting the current animation. I know Blake asked you about this in one of your other threads. Can the user interrupt it? If not, you need to prevent that with the isActive() or isTweening() methods.

 

https://greensock.com/docs/TweenMax/isActive()

https://greensock.com/docs/TweenMax/static.isTweening()

 

Happy tweening

:)

 

PS It's not necessary to quote an entire answer in your replies. It makes the thread harder to follow. You can quote an answer and then edit that quote to only the relevant parts. Thanks.

 

  • Like 4
Link to comment
Share on other sites

It looks like you've taken parts of my demo, but reverted back to your original way of adding to the timeline on each mouse wheel event that calls that slide animation function. If you look at what I made for you, you'll see that all the timelines are created outside of the mouse wheel animation function. All we're doing in that handler is changing the slide number, reversing one timeline and then playing the new one. 

 

In answer to your question about the position parameter of 0, no that doesn't really fix it. It seems to, but what's happening is you are adding more and more child tweens to the timeline. They all start at 0 and all do the same thing, but the number of children keeps going up. Drop this into your function to see what I mean.

 

console.log(home.getChildren().length) 

 

Use that on any of your timelines and you'll see the array of children for each timeline keeps growing as you scroll through the slides.

 

I'm not clear on why you've gone back to adding and removing an active class and using multiple if/else statements to check slide classes. The way you have it structured again will only work with three slides. The demo I created for you works for 3 or 300. You can add as many as you like. (Except for the slide number indicator which has a limit of 5 for the purposes of illustration). 

 

As I mentioned in my demo comments, you can manually create the timelines and push them into the array rather than making them in a loop like I did. Here's what that would look like in your case.

 

var home = new TimelineMax({onComplete: onComplete, paused: true, onReverseComplete: newAnim});
var about = new TimelineMax({onComplete: onComplete, paused: true, onReverseComplete: newAnim});
var cases = new TimelineMax({onComplete: onComplete, paused: true, onReverseComplete: newAnim});
var timelines = [];

home.to(".home h1", 0.5, {x:200});
about.to(".about h1", 0.5, {x:50});
cases.to(".cases h1", 0.5, {x:100});

timelines.push(home, about, cases);

 

Whatever you do, you need to create the timelines outside of the mouse wheel handler or you'll end up with a greater duration and/or loads of duplicate child tweens. 

 

Hopefully that helps. Happy tweening.

 

  • Like 5
Link to comment
Share on other sites

Hi @PointC,

I'm very sorry again.  Because I'm still having a problem and can't figure what is really wrong here.
 

var $slideCount = 0;
        var $animStatus = false;
        var $oldSlide = 0;
        var timelines = [];
  
  
        var homeTL = new TimelineMax({paused:true,id:'homeTL',onComplete: onComplete,onReverseComplete: newAnim});
        var aboutTL = new TimelineMax({paused:true,id:'aboutTL',onComplete: onComplete,onReverseComplete: newAnim});
        var servicesTL = new TimelineMax({paused:true,onComplete: onComplete,onReverseComplete: newAnim});
        var caseStudy = new TimelineMax({paused:true,onComplete: onComplete,onReverseComplete: newAnim});
        var team = new TimelineMax({paused:true,onComplete: onComplete,onReverseComplete: newAnim});
        var contact = new TimelineMax({paused:true,onComplete: onComplete,onReverseComplete: newAnim});

            homeTL.to('.left-home .header',0.5,{x:300})
        
            $aboutHeader = $('.left-about h1');
            $aboutHeader3 = $('.left-about h3');
            $aboutDescription = $('.left-about .description');

            $aboutSplitText = new SplitText([$aboutHeader,$aboutHeader3], {type:"words"})
            $aboutSplitTextDescription = new SplitText([$aboutDescription], {type:"words"})

            $aboutSplitText.split({type:"chars, words"})
            $aboutSplitTextDescription.split({type:"chars, words,lines"})


            aboutTL.staggerFromTo($aboutSplitText.chars, 0.6, {y:80, autoAlpha:0},{y:0, autoAlpha:1,ease: Expo.easeInOut}, 0.03)
            aboutTL.staggerFromTo($aboutSplitTextDescription.lines, 0.5, {y:50, autoAlpha:0},{y:0, autoAlpha:1,ease: Expo.easeInOut}, 0.04);

            $servicesHeader = $('.left-services h1');
            $servicesHeader3 = $('.left-services h3');
            $servicesDescription = $('.left-services .description');

            $servicesSplitText = new SplitText([$servicesHeader,$servicesHeader3], {type:"words"})
            $servicesSplitTextDescription = new SplitText([$servicesDescription], {type:"words"})

            $servicesSplitText.split({type:"chars, words"})
            $servicesSplitTextDescription.split({type:"chars, words,lines"})


            servicesTL.staggerFromTo($servicesSplitText.chars, 0.6, {y:80, autoAlpha:0},{y:0, autoAlpha:1,ease: Expo.easeInOut}, 0.03)
            servicesTL.staggerFromTo($servicesSplitTextDescription.lines, 0.5, {y:50, autoAlpha:0},{y:0, autoAlpha:1,ease: Expo.easeInOut}, 0.04);


  
            timelines.push(homeTL,aboutTL,servicesTL,caseStudy,team,contact);
            timelines[0].play();

        // GSDevTools.create();
        
            
        function newAnim(){
          
          TweenLite.set($slides, {autoAlpha: 0,className:'-=active'});
          TweenLite.set($slides[$slideCount], {autoAlpha: 1,className:'+=active'});

          timelines[$slideCount].play();
  
        }
    
  
  
        function onMouseWheel1(e){
          
            if($animStatus===true){
              
               $animStatus = false;
              
               $slideCount = e.originalEvent.deltaY < 0 ? ($slideCount-=1) : ($slideCount+=1);
  
               $slideCount = $slideCount < 0 ? $slides.length - 1 : $slideCount;
               $slideCount = $slideCount > $slides.length - 1 ? 0 : $slideCount;
              
                timelines[$oldSlide].reverse();
              
            }else{
                return;
            }
        }
  
        function onComplete(){
          $animStatus = true;
          $oldSlide = $slideCount;
          console.log('complete')
        }


When you scroll next/down the page it should reverse the old slide/current and play the next slide. But the animation isn't seem right.

Here is the live demo https://dev.gcreativelab.com/

As you can immediately notice. That it just snap to the next slide without animation. But if you scroll back up and scroll down again the animation is playing the right animation and the snap to next slide is gone.

Also I added a console.log on my onComplete function and whenever refreshes the browser the after the first animation timelines[0].play it is showing 2 console.log that is complete after the page loaded that is also confusing me.

Again sorry. Hope you understand. Thank you!

Link to comment
Share on other sites

Hi @PointC,

 

I found out the bug the causes the double triggers of animation on load. First I tried recreating all the scripts and end up the same problem. Then I tried to remove some of the libraries. and the one that fixed it is removing the gsdevtools on my set of libraries that were added on my gulpfile.js.

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