logo
down
shadow

Every change done with magicscroll and greensock get reset when I hit the bottom of the page


Every change done with magicscroll and greensock get reset when I hit the bottom of the page

By : Bob Wright
Date : January 11 2021, 03:32 PM
will be helpful for those in need I'm building a side dot navigation (with four dots) using ScrollMagic and Greensock. Everything work fine until I scroll to the bottom of the page. Then, when i scroll up, my dots are getting messed up, and they wont work right(the first dot is getting highlighted when I'm right above the bottom of the page), until i hit the top of the page and then start scrolling down again. , SOLVED guys.
My dots were used in HTML like this:
code :
                <li><a href="#home" id="home_b" class="dot name-inactive"><span>Home</span></a></li>
                <li><a href="#about" id="about_b" class="dot name-inactive"><span>About</span></a></li>
                <li><a href="#services" id="services_b" class="dot name-inactive"><span>Services</span></a></li>
                <li><a href="#contact" id="contact_b" class="dot name-inactive"><span>Contact</span></a></li>
 $(document).ready(function(){


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




     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);


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

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


        var controller = new  ScrollMagic.Controller();

         var timeline = new TimelineLite();

    // 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'


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

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



     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: 0.7

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



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




     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);




});


Share : facebook icon twitter icon
Reset Zend_Paginator page to first page on select change

Reset Zend_Paginator page to first page on select change


By : Rebecca Löfflad
Date : March 29 2020, 07:55 AM
will be helpful for those in need If you want to avoid the page parameters from the url itself, you can build your form action without the page parameter.
code :
   $form->setAction('/controller/action');
    $paginator->setCurrentPageNumber(1);
Greensock fading in and out on background image change

Greensock fading in and out on background image change


By : GVD
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further Take a look at this result.
Snippet:
code :
var avatarCount = 6;
var avatarHeight = 250;
var avatarTotalHeight = 1500;
var avatars = $(".avatars");
var animDuration = 0.1;
var i = 0;
var timeline = new TimelineMax({ paused: true, repeat: -1 });
timeline.to(avatars, animDuration, {
  scaleX: 1.1,
  scaleY: 1.1,
  ease: Power3.easeIn,
  onComplete: onCompleteScaleIn
});
timeline.to(avatars, animDuration, {
  scaleX: 1.0,
  scaleY: 1.0,
  ease: Power3.easeOut
});

function onCompleteScaleIn() {
  i++;
  i = i >= avatarCount ? 0 : i;
  TweenMax.set(avatars, {
    backgroundPosition: '0 -' + (i * avatarHeight) + 'px'
  });
}

timeline.play();
#container {} #container,
.section {
  overflow: hidden;
  position: relative;
}
.section {
  position: absolute;
}
#container .logo_o2 {
  bottom: 10px;
  right: 20px;
}
.section {
  position: relative;
  height: 250px;
  width: 300px;
  display: block;
}
.section .abs {
  position: absolute;
}
.section h1,
.section h2,
.section h3,
.section h4 {
  font-size: 21px;
  width: 100%;
  text-align: center;
  letter-spacing: 0;
}
.section1,
.section2,
.section3,
.section4,
.section5,
.section6 {} .avatars {
  background-image: url(http://s1.postimg.org/dwt9yu9b3/test_bg_sprite.png);
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  height: 250px;
  width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<div class="section section3">
  <div class="abs clouds"></div>
  <div id="avatars" class="abs avatars"></div>
</div>
How do I nest a Greensock timeline in multiple Greensock timelines?

How do I nest a Greensock timeline in multiple Greensock timelines?


By : lili.S
Date : March 29 2020, 07:55 AM
wish of those help There are many ways to accomplish this, but let me first point out a few things:
An animation (tween or timeline) can only have one parent. Think of it like a DOM node in that sense. So you cannot add() tl1 to both tl2 and tl3. When you add() it to one, it'll be removed from the other. The paused state of a timeline is honored even when it's nested inside another. For example, if you pause tl2, then put it into tl3 and then tl3.play(), you won't see tl2 play because it's still paused. You can just pass in selector text as the target, and GSAP will use document.querySelectorAll() if jQuery isn't loaded. So instead of document.getElementById("one"), you can just use "#one" (though it's perfectly fine to do it the other way too). You don't have to initially pause your timelines and then call play() immediately - they won't render until the next "tick" anyway so it's wasteful to pause and then play on the same tick. It's not "wrong" and it won't change how anything looks - it's just extra unnecessary code.
code :
tl2.fromTo("#one", 0.5, {x:0}, {x:10})
   .fromTo("#two", 0.5, {x:0}, {x:10});
tl3.fromTo("#one", 0.5, {x:0}, {x:10})
   .fromTo("#three", 0.5, {x:0}, {x:10});
tl2.add(tl1.tweenFromTo(0, tl1.duration()));
tl3.add(tl1.tweenFromTo(0, tl1.duration()));
How to change my second Greensock animation in timeline to start 1 second earlier

How to change my second Greensock animation in timeline to start 1 second earlier


By : Nesrine
Date : March 29 2020, 07:55 AM
Hope this helps How to change my second Greensock animation in timeline to start 1 second earlier, like fill to start 1 second before drawing lines finished.
code :
var tl = new TimelineMax();
tl.from(".blue-line, .yellow-line", 3, {drawSVG:0, ease:Power1.easeInOut})
tl.to(".blue-fill, .yellow-fill", 1, {css:{opacity:1}, ease:Linear.easeIn} , "-=1");
Reset browser zoom level when a page change

Reset browser zoom level when a page change


By : Zephyr_H
Date : March 29 2020, 07:55 AM
wish help you to fix your issue You can get the users zoom level by comparing the innerWidth and document width. Document width is the width of the device in pixels, inner width is the pixels which are on screen when zoomed (in relation to what the document width initially was). I have tested this on android (ICS and Jellybean), and iOS (5 and 6) and it seems to work. Note, I do not have my viewport set to device width or height
Related Posts Related Posts :
  • redux how to use state
  • All data in the db is lost when closing a express based node js server
  • How to convert javascript code for Angular
  • XPath select on child nodes
  • Idle event on mouse move - how to stop script permanently on mouse move
  • Why do I get logic is not defined in this code
  • When I enter a number in the input, the first function starts
  • ES6 imports and node_modules hell
  • How to get css selector of clicked-on element?
  • How to auto input MySQL data (input column 1 data to auto input column 2 data with same column) in php?
  • Appending to Datalist Via Javascript
  • Customizing Material-UI Components with Styled-Components
  • Populate elements with class name using Javascript
  • How to execute promises in batches (first resolving 10, then next 10 and so on)
  • Maximo JS automation script: "importPackage" is not defined
  • How to surround selected text inside textarea with <em> on key combination CTRL+i?
  • Your configured registry does not support audit requests ~ On npm audit
  • What's the Angular equivalent of Vue <slot/>?
  • Iconify icon not updating when "data-icon" set with setAttribute()
  • Javascript newbie stuck with XMLHttpRequest return data
  • How to add obj to to state in my example Redux React
  • Loading "grunt-karma.js" tasks...ERROR >> SyntaxError: Unexpected identifier
  • Why do I get log is not defined
  • get the multiple index of the same string
  • How can I iterate over an Array object by using For IN or FOR OF
  • Launch local executable from web browser
  • How to prepare array of json objects to d3 hierarchical tree structure
  • VueJS - event emitted - show HTML before other calculations
  • Export SASS/SCSS variables to Javascript without exporting them to CSS
  • How to attach an event handler only once continuously
  • How to make button open a link in new tab in JavaScript?
  • Find range from the javascript object
  • How can I use my jQuery code as JavaScript?
  • How to show 5 images in a 2 row slider with bxslider
  • How to convert stream into variables in typescript
  • Three.js custom shader error on Chrome GL_INVALID_OPERATION: Active draw buffers with missing fragment shader outputs
  • My JavaScript doesn't work. How can I solve this problem?
  • Why is this async function is running synchronously?
  • Get updated variable from within react hook before return
  • I want to show all image preview but whenever I upload a new one the old one is gone
  • Would I be able to give access to specific electron APIs safely?
  • Why several clicks fire for each instance of a Class?
  • cant grab value from div using attr()
  • Instantiate subclass without constructing
  • Outputing a created object in javascript to a server side JSON file
  • Transition the numeric labels in a bar chart
  • createBottomTabNavigator: hide just one tab from the tabBar
  • iife vs simple statement behavior with document.title
  • showDialogPopup Refresh Page after Click
  • Child component does not set the initial value passed from the parent: ReactJS
  • Nodejs javascript added to button not responding
  • Trying to define a promise.all
  • Python GEE to extract featurecollection timeseries from Landsat imageries
  • How to write negative binary number?
  • Unable to set property of individual object
  • Why Named Function Expression itself cannot assign Name to another Value?
  • How to reset scroll position on single page pagination
  • How to scroll to bottom of page, when a new message is sent - Socket.io
  • How to reconstruct audio blob from a base64 encoded String?
  • How to calculate numbers within an array of objects
  • shadow
    Privacy Policy - Terms - Contact Us © festivalmusicasacra.org