Jump to content
Search Community

Roman Kovalev

Members

  • Posts

    24

  • Joined

  • Last visited

 Content Type 

Posts posted by Roman Kovalev

    How to update value in tween when reversed?

    in GSAP

    Posted

    Hey, there! 
    Is there a way to update the value inside tween when getting the animation reversed? For now I need some kind of fake preload animation, before modal window loads, so I'm using delay parameter with a variable value . But when I'm closing modal window (by clicking on a background layer), animation reversing but considering that delay. Is there a way to change that variable value on reverse?

    See the Pen yzLqXG by NeedHate (@NeedHate) on CodePen

    Accordion with dynamic height according to content inside

    in GSAP

    Posted

    Hi, there! 
    I'm making a common accordion for a project that uses GSAP. But faced with the following issue.
    When I animate element like :

      

    tl.from(element, .5, { height: 0 });

     

    ... it takes the initial height of element (which consists of content inside it), but when I change throught media query, for example, the font size, it is obvious that the height of element reduces. But it still uses the initial height. So I have spaces on the bottom, because of initial height. 

    Is there a way to update the calculation of height, when somthing changes in css or maybe on resizes?

    See the Pen BdZvMQ by NeedHate (@NeedHate) on CodePen

    Collapsing menu navigation

    in GSAP

    Posted

    My appologies for not asking right. Set the width of a pen to 600px, it goes to a mobile version. Then click on headings. They have to open the list of submenu links animating height and submenu elements appearance. When you go back to a "desktop" version (upper then 600px) the block becomes as a simple grid. Then back to "mobile". And animation crushes: not setting right height or submenu elements dont appear from left to right.

    Collapsing menu navigation

    in GSAP

    Posted

    Hey, there! 
    I'm woking on collapsing menu elements with GreenSock. The idea is to create elements to appear on desktop as it is, but in mobile version it goes like accordion. And I have experienced some kind an issue.

    I need GreenSock to work in mobile only and when I'm back to desktop - greensock stops its functionality. So far I' m using flags  to understand if the version is mobile and clear tweens via clearProps:"all" (dont think its the best approach).  And the issue is: when I'm switching between mobile and desktop versions some time (often) menus are not collapsing, or collapsing with the wrong height size, or with wrong appearance of menu elements. I've made codepen example. Can you, guys, point me whats wrong? 

    See the Pen jLEPEJ by NeedHate (@NeedHate) on CodePen

    Too many of "from" tweens

    in Banner Animation

    Posted

    Have faced that need to work with a multiple "from" tweens with a same element.

    Of course that gave me a wrong experience with using such a "structure", like:

    tl.from(Intro_logo, .5, {opacity: 0})
//bla bla other tweens
tl.to(the.Intro_logo, 0.25, {opacity: 0}, 'second_frame_start')
//bla bla other tweens
tl.set([Copy, Intro_logo], {className:"+=next-step"})
//bla bla other tweens
tl.from(Intro_logo, 0.75, {opacity: 0, x: '-30%'})

    will give me the result that my Intro_logo will have on the very beginning of the animation the positioning of x: -30% (as example).

     

    How can I figure it out? Because, with my current job I will have to challenge it always. Thanks in advance!

    How to animate tween while other tween animation is applied

    in GSAP

    Posted

    Making an animation, and the question appeared : 
    I need to animate one tween while other tweens are animating. Sorry the code is too big, so will cut it:

    TimelineMain.to(the.Second_frame_bg_1, .75, {scale: 1.3, autoAlpha: 1, ease: Sine.EaseOutIn}, 'second_frame_step_1');
TimelineMain.to(the.Second_frame_bg_1, 4, {scale: 1.2, x: '-40px', ease: Sine.EaseOutIn}, 'move_right'); //I want this tween to be animated while next one tweens are animating
TimelineMain.staggerFrom([Destination_city_1, Destination_price_1], 0.7, {scale: .3, opacity: 0, ease: Sine.EaseOutIn}, .15, 'second_frame_step_1');
TimelineMain.from(Destination_cta, 1, {y: '50%', opacity: 0, ease: Back.easeOut.config(1.7)});
TimelineMain.from('.destination_info', 1, {opacity: 0});

     

    Alternately switch of tabs with GSAP

    in GSAP

    Posted

    Hey, guys! 
    I'm making smooth tab switchers with GSAP help. So I faced on trouble: when I click on different tab buttons (quickly) and animation hasn't stopped from previous elements the next element starts its animation. Any help ?

    UPD

    Oh, fixed.... Ask the right question and answer it yourself.

    See the Pen NrrNqM by NeedHate (@NeedHate) on CodePen

    • Like 1

    OnComplete function inits on start of animation with pause parameter

    in GSAP

    Posted

    Hey, guys. Continuing to work with my can rotation project. Here is the code: 
     

    project.canAnimation = function() {
    var element = $(".text-element");
    var tl = new TimelineMax({paused: true});
    var $bottle = $('.bottle-block');
    var $sub_title = $('.sub-title');
    var $ready_status = $('.ready-status');
    var $share_block = $('.share-section');
    var $share_block_element = $('.share-section li');

    tl.to(element, 0.75,  {y: -200,rotationX: -90, scale: .75, ease:Expo.easeOut})
    .fromTo(element, 0.75, {y: 200,rotationX: 90, scale: .75}, {onComplete: project.statusGenerator(), y: 0, rotationX: 0, scale: 1, ease:Expo.easeOut, immediateRender:false})
    .to($bottle, 1, {y: '-=70'}, 1.75)
    .to($sub_title, 0.75, {opacity: 0}, 1.75)
    .from($ready_status, 1, {opacity: 0, y: 30})
    .staggerFrom($share_block_element, 2, {y: 30, rotationX: 45, transformOrigin:"left 50% -50", opacity: 0, ease: Elastic.easeOut}, 0.25);


    function step_1() {        
        tl.play();
    }
    function step_2() {
    	tl.to(element, 0.75,  {y: -200,rotationX: -90, scale: .75, ease:Expo.easeOut})
    	.fromTo(element, 0.75, {y: 200,rotationX: 90, scale: .75}, {onComplete: project.statusGenerator(), y: 0, rotationX: 0, scale: 1, ease:Expo.easeOut, immediateRender:false})
    }

    $('#generate-status').on('click', function(){
      	if(!$(this).hasClass('step-2')){
    		step_1();
    		$(this).addClass('step-2');
    	} else {
    		step_2();
    	}

    });
}

    The problem that onComplete: project.statusGenerator() inits on page load with its related tasks despite the fact that timeline is paused. But I want to make it happen as I want - on complete.  What am I missing?

    Bottle rotation effect

    in GSAP

    Posted

    Hey, there! 
    I'm quite a newbie with GSAP and it seems that all I'm making is a chaos in code. 
    My goal is to create rotation effect of bottle, so I need to "rotate" the text which goes up and appears from bottom each time the button is pressed. Where to start digging?
     

    upd
     

    And why does the text invisible on start?

    See the Pen JXqroG by NeedHate (@NeedHate) on CodePen

    • Like 1

    Smooth scroll issue

    in GSAP

    Posted

    Yes, I understand that body has 100vh. Thats the trick, so the left side of menu always have 100% of window heighе . But why doesn't scroll work in othert scrollable elements? On the element of the ".content" class, for example? is it possible to change something, so the scroll is to work in a specific container?

    Smooth scroll issue

    in GSAP

    Posted

    Guys, I'm using some specific technique to build something like that is in codepen pattern.
    But the thing is that its not working, when the height of body is max 100vh. Is there any way to avoid this issue using this awesome script?

    See the Pen ogrvrv by NeedHate (@NeedHate) on CodePen

×
×
  • Create New...