Jump to content
GreenSock

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

danissimo

Members
  • Posts

    48
  • Joined

  • Last visited

Posts posted by danissimo

  1. Hi Zach,
    ok, I will create a pen a little later (I'm trying to create a 3d carousel with boots always facing the screen).

     

    In the meantime, I have a couple of other questions: if I animate the transform directly is it possible to use a relative construction like this:
    gsap.to (".carouselBase", {duration:1, transform:"rotateY(-=72deg) translateZ(50vh) rotateY(-=72deg)", ease:"power2.inOut"});
    I tried it but it doesn't seem to work.

     

    Also I'm wondering is it possible to keep relative units work during animation in this case:
    gsap.to (".carouselItem", {duration:1, rotationY:"-=72deg", ease:"power2.inOut"});
    with CSS:

    transform: rotateY(144deg) translateZ(60vh) rotateY(-144deg);

     

    I mean is it possible to retain this 60vh during animation and while resizing the browser viewport?
     

  2. 6 minutes ago, GreenSock said:

    If I remember correctly, the styles can't be in external files (security restrictions imposed by the browser). In other words, <style>...</style> NOT <link rel="stylesheet" href="styles/layout.css">

    In that case a page loads with errors only from a local drive, but it does work from a server (web or local). At least I don't see any errors in the Console.

  3. I see strange behavior in Chrome: almost every time the script doesn't work. But sometimes, on 1/20, 1/30 reload it does. At the same time it works in the latest Edge (no extensions there except AdBlock). And the percent of working reloads is almost the same in Opera as in Chrome. Could it be any extension that interferes with GSAP?

     

    Here's my test files (sorry for not Codepen):
    html:
     

    <!-- Begin Stylesheets -->
        <!-- Reset -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
        <!-- Layout -->
        <link rel="stylesheet" href="styles/layout.css">
        <!-- End Stylesheets -->

        <!-- Begin JavaScript -->
        <!-- jQuery -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <!-- GreenSock -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/CSSRulePlugin.min.js"></script>
        <!-- PrefixFree -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
        <!-- Main -->
        <script src="scripts/main.js"></script>
        <!-- End JavaScript -->

     

    <body>
        <div class="wrapper">
            <div class="pic"></div>
            <div class="picOverlay"></div>
            <div class="textWrapper">
                <img src="images/1_2.svg" alt="" class="text_1">
                <img src="images/3.svg" alt="" class="text_2">
                <img src="images/volvo_1.svg" alt="" class="logo">
            </div>
            <div class="overlay"></div>
        </div>
    </body>

     

     

    Main.js:

    $(function(){

        gsap.to (CSSRulePlugin.getRule (".overlay"), {duration:3, cssRule:{backgroundColor:"blue"}, delay:0.5});

    });

     

    And here's the test link:

    http://digitalcases.ru/2020/ek/Volvo/01/_Test/

  4. Is there any way to disable matrix transformation in the engine?

    Percentage is a must-have in adaptive design (adaptive banners in my case).

    Yes, I can change x/y with left/top properties, but when I need to tween rotation or scale

    and I already have some transforms assigned to my div through css,

    that transforms become overridden with the tween matrix.

  5. Here's my example:

    http://artquest.ru/temp/avon/container.html (sorry for non-Codepen, learning it yet)

     

    Notice the 1px jump at the end of the text animations (Chrome, FF), also note the antialiasing change (and similar jump) of all the text after "big V" animation starts (most noticeable in FF). Additionally there is a barely visible pulsing of the middle petal lower border.

    I think it's all antialiasing problems. Is there any method to avoid it?

    If pure css animation is used there's no such problems.

  6. I'm trying to pause nested timeline:

    prezStartTimeline.call (buttonsHomeOff)
    		 .to ([_rootRef.overlay, _rootRef.bottomPlate], 0.5, {autoAlpha:1, ease:Linear.easeNone, onComplete:function():void {backdropLoader.pauseVideo(); _rootRef.backdrop.visible = false;}})
    		 .staggerFromTo ([_rootRef.buttonHome, _rootRef.buttonBack, _rootRef.buttonForward], 0.5, {y:"+=20"}, {y:"-=20", autoAlpha:1, ease:Cubic.easeOut, onComplete:buttonsPrezOn}, 0.1)
    		 .add (RAOTimeline);
    
    RAOTimeline.addLabel ("slide_01")
    	   .staggerFrom ([_rootRef.prezRAO.item_01, _rootRef.prezRAO.item_02, _rootRef.prezRAO.item_03], 0.5, {y:"+=20", alpha:0, ease:Cubic.easeOut, onComplete:buttonsPrezOn}, 0.1)
    	   .addLabel ("slide_02")
    	   .addPause ("slide_02")
    	   .to ([_rootRef.prezRAO.item_01, _rootRef.prezRAO.item_02, _rootRef.prezRAO.item_03], 0.5, {alpha:0, ease:Linear.easeNone})
    	   .to (_rootRef.logoSmall, 0.5, {y:"-=20", autoAlpha:1, ease:Cubic.easeOut})
    	   .staggerFrom ([_rootRef.prezRAO.item_04, _rootRef.prezRAO.item_05, _rootRef.prezRAO.item_06, _rootRef.prezRAO.item_07, _rootRef.prezRAO.item_08], 0.5, {y:"+=20", alpha:0, ease:Cubic.easeOut, onComplete:buttonsPrezOn}, 0.1, "-=0.4")
    
    

    But when I again play child timeline after the pause (.play()), the playhead is already at the end of the child timeline (all objects are already animated to the end values). Looks like the values calculations don't stop at the pause position. Is it a bug or did I miss anything?

  7. Hello,

     

    If I call a function at the end of a timeline, position parameter doesn't work (neither absolute nor relative). Here's the code:

    var startupTimeline:TimelineLite =  new TimelineLite();
    
    startupTimeline.set (overlay, {_visible:false})
                   .from (backdrop, 0.3, {_alpha:0, ease:Linear.easeNone})
                   .staggerFrom ([picBox_1, text_1], 0.3, {_y:"+=10", ease:Cubic.easeOut}, 0.1)
                   .staggerFrom ([picBox_1, text_1], 0.3, {_alpha:0, ease:Linear.easeNone}, 0.1, "-=0.4")
                   .from ([arrowLeft, arrowRight], 0.3, {_y:"+=10", _alpha:0, ease:Cubic.easeOut}, "-=0.2")
                   .staggerFrom ([chooseButton, logo], 0.3, {_y:"+=10", _alpha:0, ease:Cubic.easeOut}, 0.1, "-=0.2")
                   .from (text_2, 0.3, {_y:"+=5", _alpha:0, ease:Cubic.easeOut}, "-=0.2")
                   .from (text_18_plus, 0.3, {_alpha:0, ease:Linear.easeNone}, "-=0.2")
                   .set (backdropOverlay, {_visible:true})
                   .call (function():Void {switchPortraitsTimer = setInterval (switchPortraits, 2000);}, null, "-=1");
×