Jump to content
GreenSock

DD77

Members
  • Posts

    171
  • Joined

  • Last visited

Posts posted by DD77

  1. I need a click event on (section-2) which will do the following:


    - Page body changes background colour (adding class="darkerblue").
    - The main element (clickable) to move across x:500, scale:1.5.

    - if I click the main element it will revert all.

    -If I scrollback to previous scene(section-1) it will revert all.


    From line 93, where I started making the scene for section-2
     

     

     

    See the Pen WdvWMd?editors=1010 by davide77 (@davide77) on CodePen

  2. Not sure why the image on section-2 doesn't center on scroll. I tried everything so far. It should appear from section-1, so with the offset, starts animating .

    What I'm I missing here?  on leave should go back at the start on the left.

        new ScrollMagic.Scene({triggerElement: "#section-2",offset: -350, duration:  $('#section-2').outerWidth(true)})
            .on("enter", function(){
            $("#anchor2").addClass('selected');
            $("#section-2").addClass('animated fadeInUp'); 
    
            var tl = new TimelineLite();
    
            tl.to("#section-2.fadeInUp .animated-items", 1, { x: getMidX("#section-2.fadeInUp .animated-items")+20 } );
    
            function getMidX( obj ){
              return ( $(obj).parent().width()/2 ) - $(obj).width()/2;
            }
    
          })
            .on("leave", function(){
            $("#anchor2").removeClass('selected');
            $("#section-2").removeClass('animated fadeInUp');
    
            tl.to("#section-2.fadeInUp .animated-items", 1, { x: getMidX("#section-2.fadeInUp .animated-items")+20 } );
    
            function getMidX( obj ){
              return ( $(obj).parent().width()/2 ) - $(obj).width()/2;
            }
    
          })
          .addTo(controller);
      

     

    See the Pen GyRxYj by davide77 (@davide77) on CodePen

  3. @sahil thanks, this is much better,  I've now added a bit of interaction to the sections, so for each scene we have some classes to the specific containers.

    I'm also going to add some parallax once all works, I was thinking to add something like this, 

    See the Pen wpwVgx?editors=1010 by rgfx (@rgfx) on CodePen

     


    not quite sure is the best way possible. Could you help to implement a parallax function? So I can use it around the sections?

     

     

     

     

     

    See the Pen GyRxYj?editors=1010 by davide77 (@davide77) on CodePen

     

  4. The animation is not like I want, it should have a typical collapsing expanding experience.

    If you click the "Expand/collapse", you'll expand/collapse the content.

    It doesn't have the expected animation of the height when is scaling , when I click close (X) it shold do the reversing animation.  Content should be pushed.

    console.log('click 1'); 
          TweenMax.fromTo(".Tile.is-expanded .Tile-flyout", 0.8, { scaleY:0 ,transformOrigin:"center top", autoAlpha:0,   ease: Linear.easeNone }, {scaleY:1, autoAlpha:1,});
          TweenMax.fromTo(".Tile.is-expanded .Tile-flyout > *", 0.8, { scaleY:2,transformOrigin:"center bottom", ease: Linear.easeNone }, {scaleY:1,});

     

    console.log('click 2');
          TweenMax.fromTo(".Tile .Tile-flyout", 0.8, { scaleY:1 ,transformOrigin:"center bottom", autoAlpha:1, ease: Linear.easeNone }, {scaleY:0, autoAlpha:0,});
          TweenMax.fromTo(".Tile .Tile-flyout > *", 0.8, { scaleY:2,transformOrigin:"center bottom", ease: Linear.easeNone }, {scaleY:1,});

     

    Demo:

    See the Pen GOdgzq?editors=0010 by davide77 (@davide77) on CodePen

     

  5. I'm trying to expand the content using GSAP, so I can have the height animated of the hidden content. 

    If you click the "Sterilisers" button/product, you expanding the content. 

    I applied GSAP but with not the expected result. Please advice what's the best  way.

     

    $('.js-tile').richTile().on({
      'expanded.RichTile': function(event, tile) {
        // disable siblings on expand
        var siblings = tile.element.siblings('.js-tile');
        siblings.richTile('enable');
        siblings.richTile('collapse');
        
          var currentTile = $(this);
          var $tiles = $('.js-tile');
          $tiles.not(currentTile).addClass('not-expanded');
        console.log('click 1');
        TweenMax.from(".Tile.is-expanded .Tile-flyout", 0.8, { height:0 , opacity: 0, autoAlpha:0, ease: Power1.easeOut });
          
        // re-enable when this tile is collapsed
        tile.element.one('collapsed.RichTile', function() {
          siblings.richTile('enable');
          $tiles.not(currentTile).removeClass('not-expanded');
          
          console.log('click 2');
          TweenMax.from(".Tile-flyout", 0.8, { height: 0, opacity: 0, autoAlpha:1, ease: Power1.easeOut });
       
        });
      }
    });

     

    See the Pen ZaxOzQ by davide77 (@davide77) on CodePen


  6. @Jonathan hi, yes, sorry I modified the code and deleted it . 


     

    $('.js-tile').richTile().on({
      'expanded.RichTile': function(event, tile) {
        // disable siblings on expand
        var siblings = tile.element.siblings('.js-tile');
        siblings.richTile('disable');
        console.log('click 1');
        TweenMax.from(".Tile.is-expanded .Tile-flyout", 0.8, { height:0 , opacity: 0, autoAlpha:0, ease: Power1.easeOut });
        
        // re-enable when this tile is collapsed
        tile.element.one('collapsed.RichTile', function() {
          siblings.richTile('enable');
          console.log('click 2');
          TweenMax.from(".Tile-flyout", 0.8, { height: 0, opacity: 0, autoAlpha:1, ease: Power1.easeOut });
        });
      }
    });

    doesn't work at all 

  7. I'm trying to have the expanded container on a full width. I was wondering if there's a way with GSAP. 
    My full-width container once active should expand full width. Bu also should push the content below. So it can't be positioned absolutely. 

    Please click any product, the expanded content should be full width, max-width:1200px. 
    Any what I can Achieve it in GSAP? 

    See the Pen QOMXRJ by davide77 (@davide77) on CodePen

  8. Is working quite ok, the only requirement is making the buttons to animate with GSAP instead than css.  On click I should make the button active with width and height 96px. By default the first element should be always active.

    I put together this code (is not on the demo ) which is not working fine.
     

        $(".app-promo-img-align:first").addClass("active");
    	TweenLite.to('.app-promo-img-align.active a', 0.4, {width:'96px', height:'96px'})
    
        var button = $('.app-promo-images').find('.app-promo-img-align')
    
        button.onclick = function(e) {
            e.preventDefault;
    		$(this).addClass("active");
            $('.app-promo-img-align.active').removeClass("active");
    
    
            if ($(button).hasClass('active')) {
                TweenLite.to('.app-promo-img-align.active a', .5, {width:'96px', height:'96px', ease: Power3.easeOut })
    
            }
            else{
    			TweenLite.to('.app-promo-img-align a', .5, {width:'80px', height:'80px', ease: Power3.easeOut })
            }
        }


     

    See the Pen BwgLMq by davide77 (@davide77) on CodePen

×