Jump to content
GreenSock

jesper.landberg last won the day on January 6 2019

jesper.landberg had the most liked content!

jesper.landberg

ShockinglyGreen
  • Posts

    127
  • Joined

  • Last visited

  • Days Won

    1

Posts posted by jesper.landberg

  1. Great examples, Jonathan.

     

    It seems Jesper may want a different animation (not just a reverse) on mouseleave.

     

    In this demo, you will see that the if you rolloff quickly while the first animation is still playing, the first animation will complete and then the leave will play.

    I allow this by adding an onComplete callback to the first animation if you rolloff before it is complete.

     

    if you stay over the button for a long time, the reverse animation will not start until your roll out.

     

    See the Pen pbBAVg?editors=0010 by GreenSock (@GreenSock) on CodePen

     

    In the future, when providing reduced test cases, please resist using processors like Babel as it adds an extra level of obfuscation for some of us and it will make our response time slower. Thanks for understanding.

     

     

    Hello jesper.landberg,

     

    Thank you for the example, very helpful !!

     

    Please standby to give use time to test and offer solutions, Thanks!

     

    In the mean while... you can proablly check if the tween isActive() the if it is do not trigger restart()

     

    http://greensock.com/docs/#/HTML5/GSAP/TweenMax/isActive/

     

    And then use the onComplete callback in your tween to trigger restart() for leave

     

    Usually when doing a hover its best to just play() on mouseenter and then simply reverse() on mouseleave.

     

    I see you are using to different timelines for the same button hover since the same thing will happen when hovering in and out. You can combine those timelines ;)

     

    Here are example of simple hover in and out using play() and reverse()

     

    See the Pen rOgVEd by jonathan (@jonathan) on CodePen

    See the Pen obRyBr by jonathan (@jonathan) on CodePen

    See the Pen NxVMBx by jonathan (@jonathan) on CodePen

    See the Pen KdYqWo by jonathan (@jonathan) on CodePen

    See the Pen tukhf by jonathan (@jonathan) on CodePen

     

    Hopefully these are helpful showing you the concept to use one timeline instance with play() on mouseenter and reverse() on mouseleave.

     

    :)

     

    Thanks for the great examples both of you, my problem is solved=)

    • Like 1
  2. Hi,

     

    I'm trying to do a hover animation using GSAP. I could do this example using CSS but I'm going to add more to it later thus wanting to use JS/GSAP.

     

    What I want to do:

     

    If you just hover the btn quickly and leave immediately I want the enter animation to finish rather then being interupted and then I want the leave animation to fire when the enter animation is done. This works fine if I'm still hovering the btn after the enter animation is complete, but not if i leave the button before.

     

    You understand?=)

    See the Pen YWrNoA?editors=0010 by ReGGae (@ReGGae) on CodePen

  3. Hi, is it possible to add a timeline into another timelines staggerFrom?

     

    Example:

     

    SomeTimelineLite

     

    OtherTImelineLite.staggerFrom(SomeTimelineLite)

     

    In other words, I want to do a stagger animation that is quite complex and doesnt fit inside staggerFrom(el, duration, {}, staggerDelay })

  4. I'm trying to use the scrollTo plugin but i'm having a weird issue. Using the latest gsap release. TweenMax is clearly there so i don't know why it is throwing this error? Does scollTo require TweenLite?

     

    "Browserify Error { [Error: Cannot find module '../TweenLite.js' from '/app/assets/js']"

    import TweenMax from 'gsap'
    import scrollTo from './ScrollToPlugin.min'
    
    class Arrow {
    
    	constructor(){
    
    		this.arrow = document.querySelector('.js-arrow')
    
    		this.init()
    
    	}
    
    	scrollDown(){
    
    		this.arrow.addEventListener('click', () => {
    
    			TweenMax.to(window, 1.5, { scrollTo: "#story", ease: Expo.easeOut })
    
    		})
    
    	}
    
    	init(){
    
    		this.scrollDown()
    
    	}
    
    }
    
    const arrow = new Arrow()
    
  5. Hmm, not really sure from just looking at your code. Please provide a CodePen demo as explained here:

    http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

     

     

     

    FWIW we have a ScrollToPlugin beta that will scroll directly to an element so you do not have to calculate its position.

     

    Makes it super easy to do things like this:

    TweenLite.to(window, 1, {scrollTo:{y:"#myElement"});

    OR

     

    $("button").each(function(index, element){
      $(this).click(function(){
        TweenLite.to(window, 1, {scrollTo:{y:"#section" + (index+1), offsetY:70}});
      })
    })

    See the Pen LkOrKY by GreenSock (@GreenSock) on CodePen

     

     

    Feel free to try it in your project. If you need help with your existing method just send us a demo and we will take a look.

    Hi, how do I use the beta? 

  6. Hi,

     

    I am trying to use scrollToPlugin for the first time but I have a strange(?) issue. It works fine IF the element anchor I'm scrolling to has position: fixed. If else it doesn't work it just jumps there like a normal anchor. Can anyone see what is wrong? (also I'm parting ways with jQuery if you think my JS looks ugly or something:P)

     

    Code (part of a Class):

    import TweenMax from 'gsap'
    import utils from './config'
    import domselect from 'dom-select'
    import scrollTo from './ScrollToPlugin.min'
    
    this.topLink.forEach((el) => {
    
    	const href = el.getAttribute('href')
    	const url = href.replace(/\/+$/, "")
    	const submenu = el.nextElementSibling
    	const links = utils.js.arrayFrom(submenu.querySelectorAll('a'))
    
    	links.forEach((el) => {
    
    		if(utils.$url.indexOf(url) > -1){
    
    			el.addEventListener('click', (ev) => {
    
    				const el = ev.target
    				const anchor = el.getAttribute('href')
    				const scrollTo = domselect(`${anchor}`).offsetTop
    
    				TweenMax.to(window, 1, { 
    					scrollTo: { 
    						y: scrollTo
    					}, 
    					ease: Expo.easeInOut 
    				})
    
    			})
    
    		} else {
    
    			const anchor = el.getAttribute('href')
    			el.setAttribute('href', `${url}${anchor}`)
    
    		}
    
    	})
    
    })
    
  7.  

    Hello jesper.landberg,

     

    Without seeing your code in a live editable environment it will be hard to test your code. Here is a video tut by GreenSock on how to create a codepen demop example so we can better help you:

     

     

    But i would just set the element you want hidden with a CSS property of visibility:hidden in your stylesheet for your element you want hidden on page load.

     

    And then you would animate autoAlpha instead of alpha.

     

    autoAlpha is found in the GSAP CSSPlugin Docs:

     

    http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

    • autoAlpha

      Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.

    Example of autoAlpha usage:

    //fade out and set visibility:hidden
    TweenLite.to(element, 2, {autoAlpha:0});
    
    //in 2 seconds, fade back in with visibility:visible
    TweenLite.to(element, 2, {autoAlpha:1, delay:2});
    

    Using autoAlpha is better on performance when showing and hiding elements.

     

    :)

     

    Thanks for the reply, seems like autoAlpha sovled the problem:)

  8. Hi,

     

    I have a problem I have encountered a couple of times. If I have a timeline and some code.. something like this for example:

    var tl = new TimelineLite({paused:true}};
    
    tl
    .set(element, { display: "block" })
    .from(element, 1, { alpha: 0, ease: Power2.easeInOut });
    
    $('a').click(function(e){
        e.preventDefault();
    
        var self = $(this);
    
        if(self.hasClass('active')){
            self.removeClass('active');
            tl.reverse();
        } else {
            self.addClass('active');
            tl.play();
        }
    
    });
    

    Sometimes, randomly, the tl.reverse(); won't reverse display: "block" to it's initial state, why is this and is there any solution?

  9. Hello jesper.landberg, and Welcome to the GreenSock Forum!

     

    I have some questions if you please:

    • What does your SVG markup look like?
    • Are you trying to animate elements within a SVG <defs> or <symbol> element?
    • Does it work in just Google Chrome and/or Safari?

    Also keep in mind that CSS clip is not widely supported when it comes to animating polygon due to browser support. So non webkit browsers like IE11, MS Edge, or Firefox will not support or have partial support for CSS clip polygon.

     

    If possible can you please create a limited codepen demo so we can better help you by seeing your code live and in an editable environment.

     

     

    Thanks :)

    Hi and thanks for the reply. 

     

    I am animating a regular html element, so no SVG involved. I know the support isn't the best but it works if I animate it with CSS by toggling a "is-active" class so I thought I would be able to do the same with Tweenmax.

     

    I will see if I can fix a simpel codepen=)

  10. Hi,

     

    How do I animate clip-path using TweenMax? My code below does not work.

    var clipFrom = "polygon(52% 0, 77% 0, 39% 100%, 16% 100%)";
    var clipTo = "polygon(0 0, 100% 0, 100% 100%, 0 100%)";
    
    TweenMax.fromTo('.some-element', 0.75, { clip: clipFrom }, { clip: clipTo, ease: Power4.easeOut }),
  11. Understand about the image dimensions.

     

    I am curious though if it did improve any rendering for you, i.e. a solution using an overlaying element of top of an image to reveal it by animating `translateY` over anything else, even if you are unable to utilize it. And sure, do share what you have and I can help as much as I can.

     

    Re `yPercent`, I recommend reading the blog about the release of 1.13.1 version of GSAP. This feature has been available for a while now.

    Yeah animating Y instead of height is for sure more smooth. Maby I have to try something else for my transition than height, want to be smooth in all modern browsers. I'l PM the link.

  12. Don't really notice much difference here on my Macbook but my guess is the browser is having a hard time render a very large image (5615x2907 pixels) or it could be that you are animating `height` that is causing problems.

     

    If animating `height` (which, in many cases, could produce janky animations) is the cause, here is a

    See the Pen adpvLy by tah_med (@tah_med) on CodePen

    with a few amendments for you to try out. As I said, I didn't notice any difference for me in the first place so I can't really tell if this forked version will do any good, but give it a try and let me know how it goes.

    Well, the image i am actually using in development is "only" 300kb 1920x1080px, so I don't know if that is the problem, might be the height. 

     

    Your solution is nice, but I can't use a white overlay, since I am animating it over another page. I am uploading my stuff to a password protected dev server atm, I can PM u the password and you can see the real stuff. 

     

    BTW, didn't know u could transform procentual values now (yPercent), is that a new feature? Cleaner than saving the width of an element as a variable when I need to transform full width or height.

  13. Hi @jesper.landberg,

     

    Without a reduced test case, it is difficult, for me at least, to tell you why your animations don't run smoothly on Safari and what can be done to make them better. Could you make a demo for us that runs your animations smoothly on Chrome and Firefox and doesn't run well on Safari?

     

    As for the questions, here are the answers, based on the little understanding I have about the system:

    1. I think It depends on use-cases. However I find that its best in most cases to let the engine decide for itself hence `auto`. Link.
    2. As of 1.15.0, `force3D` is set to `auto` by default. No need to explicitly set it in your tweens. The other two values are `true` and `false` to either force GPU involvement or not. Having said that, there is a way to apply `force3D` globally by doing: `CSSPlugin.defaultForce3D = true; /* 'auto' or false */`. Link.
    3. Search for `force3D` in these forums and you should find plenty of posts regarding it.

    Hope this helps in some way.

    Hi again,

     

    here comes a somewhat simplified demo, but I still get pretty much the same issue, the animation is very jumpy in Safari, it kind of jumps to the middle and goes from there. See for yourself.

     

    See the Pen zrNvoN by ReGGae (@ReGGae) on CodePen

     (best to watch in full page mode)

  14. Hi @jesper.landberg,

     

    Without a reduced test case, it is difficult, for me at least, to tell you why your animations don't run smoothly on Safari and what can be done to make them better. Could you make a demo for us that runs your animations smoothly on Chrome and Firefox and doesn't run well on Safari?

     

    As for the questions, here are the answers, based on the little understanding I have about the system:

    1. I think It depends on use-cases. However I find that its best in most cases to let the engine decide for itself hence `auto`. Link.
    2. As of 1.15.0, `force3D` is set to `auto` by default. No need to explicitly set it in your tweens. The other two values are `true` and `false` to either force GPU involvement or not. Having said that, there is a way to apply `force3D` globally by doing: `CSSPlugin.defaultForce3D = true; /* 'auto' or false */`. Link.
    3. Search for `force3D` in these forums and you should find plenty of posts regarding it.

    Hope this helps in some way.

     

    Thanks for the answer. Going to try to create a demo recreating the issue.

  15. Hi,

     

    I have some questions regarding force3D. I have a pretty animation-heavy site, which runs super smooth in Chrome and Firefox, but very poorly in Safari, and I am looking into all possibilities why this might be. One thing I am thinking about is the way I use force3D.

     

    1. Should I use true or auto? 

     

    2. Should i use force3D on ALL alements that have alpha or transforms animated? I currently set force3D: "auto" on all of them.

     

    3. Any good resources on how to use force3D correctly?

     

  16. Hi,

     

    I'm trying to create enter and leave animations with TweenMax and angular 1.4+.

     

    I have this code:

     




    .animation('.page', [function(){

    return {
    enter: function(element, doneFn){
    TweenMax.from(element, 1, { css: { transform: "scale(0.8)", opacity: 0 }, force3D: "auto" });
    },
    leave: function(element, doneFn){
    TweenMax.to(element, 1, { css: { transform: "scale(1.1)", opacity: 0 }, force3D: "auto" });
    }
    };

    }])


     


    The animations are working but the thing is the pages get stacked, since I don't tell angular when the animation is done. You are supposed to use "doneFn" for this but I don't know how to implement that in the code.

     


  17. lets say I have this:

    div{
    transition: translate .25s;
    }
    div:hover{
    transform: translateY(100px);
    }

    How would I replicate a simple hover effect with GSAP? Start animation on hover, and reverse it on mouseout, and enable them to be interruptible?. Well yeah exactly how hovers work with CSS.

×