Jump to content
GreenSock

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

Fade in and fade out text on the same timeline.

Recommended Posts

Ηey all! I'm new to this library and i really need some help here.

 

I'm trying to create a dot menu on the right of the page, which is working pretty fine so far (also using Scrollmagic). The problem is that i want the text of my menu, to fade in for a second or so, and then fade out. 

My current code is this: 

var controller = new  ScrollMagic.Controller();
                        var timeline = new TimelineLite();

         var setMultipleClasses21 = TweenLite.to(('#bt1'), 1, {
            className: "fadein"
        });

           var setMultipleClasses2 = TweenLite.set((['#about_b', '#services_b', '#contact_b']), {
            className: "dot name-inactive"
        });

        var setSingleClass2=TweenLite.set(("#home_b"),{
            className: "dot name-active"
        });

                timeline.add(setMultipleClasses2).add(setSingleClass2).add(setMultipleClasses21);


        var ourScene = new ScrollMagic.Scene({
           triggerElement:"#h_id"
        })
        .setTween(timeline)
        .setClassToggle('#h_id', 'fade-out')
        .addTo(controller);

        /*----------------------------------------*/

             var timeline = new TimelineLite();
             var setMultipleClasses01 = TweenLite.to(('#bt2'), 1, {
            className: "fadein"
        });
 
        // Create a .set() tween to add "red and bold" classes
        var setMultipleClasses0 = TweenLite.set((['#home_b', '#services_b', '#contact_b']), {
            className: "dot name-inactive"
        });

        var setSingleClass0=TweenLite.set($("#about_b"),{
            className: "dot name-active"
        });

        timeline.add(setMultipleClasses0).add(setSingleClass0);

        var ourScene = new ScrollMagic.Scene({
            triggerElement:'#about',
            triggerHook: 'onCenter'


        })
        .setTween(timeline)
        .setClassToggle('#about', 'fade-in')
        .addTo(controller);
        /*----------------------------------------*/

                        var timeline = new TimelineLite();

                             var setMultipleClasses11 = TweenLite.to(('#bt3'), 1, {
            className: "fadein"
        });


         var setMultipleClasses1 = TweenLite.set((['#home_b', '#about_b', '#contact_b']), {
            className: "dot name-inactive"
        });

        var setSingleClass1=TweenLite.set(("#services_b"),{
            className: "dot name-active"
        });

                timeline.add(setMultipleClasses1).add(setSingleClass1);


        var ourScene = new ScrollMagic.Scene({
            triggerElement:'#s_id',
            triggerHook: "onCenter"

        })
        .setTween(timeline)
        .setClassToggle('#s_id', 'fade-out')
        .addTo(controller);
        /*----------------------------------------*/

              
                        var timeline = new TimelineLite();

         var setMultipleClasses31 = TweenLite.to(('#bt4'), 1, {
            className: "fadein"
        });

         var setMultipleClasses3 = TweenLite.set($(['#home_b', '#services_b', '#about_b']), {
            className: "dot name-inactive"
        });

        var setSingleClass3=TweenLite.set($("#contact_b"),{
            className: "dot name-active"
        });

                timeline.add(setMultipleClasses3).add(setSingleClass3);


        var ourScene = new ScrollMagic.Scene({
            triggerElement:'#c_id'

        })
        .setTween(timeline)
        .setClassToggle('#c_id', 'fade-out')
        .addTo(controller);

also my css for the buttons are: 

#bt1.fadein, #bt2.fadein, #bt3.fadein, #bt4.fadein{
  opacity: 1;

}

#bt1, #bt2, #bt3, #bt4{
  opacity: 0;
  transition: all 0.2s ease-in;


}

Any help appreciated! Thanks! :) 

Share this post


Link to post
Share on other sites

Hey b10zgr and welcome to the forums.

 

We don't really recommend className tweens. In fact, support for them has been removed in the next version of GSAP. We recommend that you tell GSAP which properties you want to animate and how because this is much more performant and leads to less issues in general :) 

 

Once you switch to using "regular" tweens, can you please provide a minimal demo of your situation? Most likely you don't need to include all of the ScollMagic stuff (unless you want it to happen at some point when scrolling down the page). Include just the parts related to your issue. The below thread can provide more information on how to do so:

 

  • Like 1

Share this post


Link to post
Share on other sites

Well, in my case, i believe that changing class is the fastest way to achieve my changes. Is there any other way to change class using TweenLite except className? 

Share this post


Link to post
Share on other sites

No, there isn't. Like I said above, it is best to tell GSAP which properties you want it to animate and how. It's really more straightforward if you get used to doing it that way. 

  • Like 1

Share this post


Link to post
Share on other sites

Hey @b10zgr,

 

Welcome to the GreenSock Forum.

 

That's how it could work ...

 

See the Pen JjjNaNR by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

  • Like 3

Share this post


Link to post
Share on other sites

Ηey guys! I've been trying to modify my code, since the last time we talk. Ive been using tweenlite.fromTo in order to set my animations, regardless of the duration of the scroll, but something doesnt work as it should. Any suggestion please? im getting desparate... 
The main idea is that the color of the dots change from #555556 to #100C3C as i scroll down and up. 

See the Pen poowWzo by b10z (@b10z) on CodePen

 here is the example of my code. Thanks in advance guys! :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×