Jump to content
Search Community

Fade in and fade out text on the same timeline.

b10zgr 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

Η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! :) 

Link to comment
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
Link to comment
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! :)

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