Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 10/13/2017 in all areas

  1. Hello @sirwin and Welcome to the GreenSock Forum! So in the link you provided what are we supposed to look at, since you have a lot going on in that site? What do you want us to scroll down to? If it was me i would first get the animation you want and then incorporate ScrollMagic which controls the animation via scroll. Here you can see a video tut by The Mighty @Carl on how to sequence tweens And this on how to use the position parameter: Are you asking how to use ScrollMagic or how to animate something with GSAP. I'm sure if you create a limited codepen example we can better help you. All you need is a couple of tweens in the codepen so we can help you get the animation your after. Thanks
    3 points
  2. Hello again @thatkookooguy I would think it is ScrollMagic that is triggering your character to run at the end of the path immediately. Since your GSAP timeline has paused: true, and ScrollMagic is what is controlling the timeline with scroll events. You could try a couple of things and see if it helps 1) You could try and wrap all your code inside a DOMContentLoaded event and a window load event so this way your code wont run until the DOM is ready and the window is fully loaded. Something like this: // wait until DOM is ready document.addEventListener("DOMContentLoaded", function(event) { window.addEventListener("load", function(){ // place your code here }); }); 2) Since you are using a from tween, in your case a fromTo() tween. You could add the special property immediateRender: false to your fromTo() tweens vars parameter, to make sure that the tween isnt run immediately. That is because from tweens by default have immediateRender set to true. But again ScrollMagic is controlling the tweens so that is what is handling running the animation on scroll event. https://greensock.com/docs/TimelineMax/fromTo() NOTE: by default, immediateRender is true in fromTo() tweens, meaning that they immediately render their starting state regardless of any delay that is specified. This is done for convenience because it is often the preferred behavior when setting things up on the screen to animate into place, but you can override this behavior by passingimmediateRender:false in the fromVars or toVars parameter so that it will wait to render the starting values until the tween actually begins. So see if that works and let us know if your still having issues like your seeing in Safari. If you are you might have to check the ScrollMagic Issues page and see if anyone else having that issue of ScrollMagic firing animation right away on load. The reason i recommend to ask ScrollMagic git Issues page is because even though ScrollMagic is made with GSAP, it is not made by GSAP. So they would be the best to help you on specific ScrollMagic bugs or issues. Happy Tweening
    3 points
  3. Hi @sirwin Welcome to the GS forum. After reading your question and looking at the site, I'm assuming you want to move the hockey player partially through its tween (probably to the middle?), pause for a bit, complete the move to the right side and then scroll up? If that's the case, Sir @Jonathan is giving you some good info. You'd want to use a timeline with the position parameter to create a short pause in the animation. Here's a basic example of an element moving to the middle, pausing for a bit and then completes its journey across the page. You can see the second tween in the timeline is using a relative position of "+=2". That's what creates the short pause in the middle. Adjust that to your liking. Hopefully that helps. Happy tweening and welcome aboard.
    2 points
  4. Hi and welcome to the GreenSock forums, There is really no reason to have to update and track the durations and delays are you are doing. TimelineMax solves all the problems with that technique. It would be really great if you would create a CodePen demo so that we could actually help you modify the code, but here is something that should roughly work. I didn't go crazy trying to match all the timing, but you can replace your TweenMax code with this: var tl = new TimelineMax({repeat:3, repeatDelay:0.5}) tl.to(copyA, 3, {autoAlpha:1}, "+=1") .to(copyB, 3, {autoAlpha:1}, "+=0.6") .to(copyC, 3, {autoAlpha:1}, "+=0.6") .to(cta, 0.8 {autoAlpha:1}, "+=1") .set(logo, {autoAlpha:1}, "+=1") .to(logo, 1, {left:-325, ease:Power2.easeOut}, "+=1") You are loading TweenMax which already includes TimelineMax so there is nothing to worry about regarding files size. Definitely watch these 2 videos in our learning section: https://greensock.com/sequence-video https://greensock.com/position-parameter The hour or 2 you invest in learning timelines will save you days of time in your future banner work.
    2 points
  5. I appreciate the time and thought that went into providing the details, but quite frankly its a bit overwhelming and I really don't follow it all. We really can't dive into a full production site and try to assess what's happening and what isn't with just a few code snippets. if you can create a very simple CodePen demo that can clearly illustrate the issue (nothing fancy) perhaps we can take a deeper look. I can take a stab at your more general question: So my question, how to stop a previous running timeline from animating and act upon the new timeline that has been triggered. I would offer a few things Part of the problem may be that you don't know if a timeline is currently running. In that case I would recommend using isActive(): https://greensock.com/docs/Core/Animation/isActive() If you have multiple timelines fighting over controlling the same properties of the same elements, you may need to rebuild those timelines fresh each time you need them (as they may contain tweens that get overwritten by the other timeline). We often suggest that you use functions to create timelines on demand. Here is a little example of that: That is a relatively simple application of that concept, you may need to also reset certain properties of some elements before re-creating the timelines. Again, what I saw on your site is just too complex at this point to really dig into and I didn't ascertain much from the code snippets provided. We definitely can provide better help with a simpler demo, just try to isolate and reduce the problem as much as possible. it doesn't need fancy graphics or anything.
    2 points
  6. Great solution by @mikel, which sparked and idea to use a jQuery forEach loop
    2 points
  7. Hi @gareth, This could be a way ... Happy tweening Mikel
    2 points
  8. amazing, thank you both. I have made a small update to yours @Carl so we do not need jquery.
    1 point
  9. @Jonathan oh cool! I used to with a duration of 0 because I thought set always happens at the start. good to know you can do that in a middle of an animation I tested this out and it seems to work as intended everywhere besides Safari (on mobile and probably on OS X as well). The character runs to the end of the path immediately on load even though you can only see the first mark on the viewport. Not sure if it's a problem with Greensock or ScrollMagic (or maybe something in my code). I'll investigate that more, but if someone has any leads (since I don't have an iPhone or a mac :-)), it would be greatly appreciated
    1 point
  10. @helleholmsen it seems that this is only happening on macOS Sierra, since i tried looking on iPad 2 on latest chrome 61 and could not see the border. So it must be something on that macOS Sierra version 10.12.6. Maybe there is someone in the forum who has that version and macOS and can offer some advice? But i cant since i dont have a macOS only iOS.
    1 point
  11. Hi! macOS Sierra, version 10.12.6. In Chrome, newest version. It appears here as well
    1 point
  12. Just did quick test, and indeed, TweenMax.killTweensOf, does the job. Thank you
    1 point
  13. Hello @thatkookooguy and welcome to the GreenSock Forum! My example below only shows your character facing backwards when scrolled up but not left to right, since i didn't have time to do the reverse backwards for side to side. Looks like you would need to add a class that places the CSS background-position-y at the value of 40px. So this way it displays the sprite image in a backwards state. If it was me i would add a new CSS rule like this that just handles the character to face up when scrolling up (so his back is facing you as he walks up): #char1.backwards, #char3.backwards, #char5.backwards{ background-position-y: 40px !important; } Notice i added !important declaration, that makes sure the background-position-y is always 40px for your image sprite to dispaly back of character. This way you would add the .backwards class when your character is getting scrolled up and is supposed to be walking up the page. So you would add that class when he walks up, then remove when he is walking from left or right. And add back again when he is moving up with the scroll-bar. Then binding an event to the mouse scroll wheel, detect if the scroll bar is going up or down. Then add the class .backwards to those 3 elements (#char1.backwards, #char3.backwards, #char5.backwards). But checking the scroll direction should probably be done with ScrollMagic enter event and check the event.scrollDirection for reverse (scroll up) or forward (scroll down). Since mousewhell can be buggy. Then you just need to detect two things on whether you add the .backwards class detect when scroll-bar is scrolling up and if your character is supposed to be walking facing up (you can mimic what i did for facing up for when you nee to face the character left or right) So this can be done with a simple add and remove of a CSS class and event binding for mousewheel or using ScrollMagic enter or update event to detect scrolling up and down. But others might have a better way of adding and removing the class either in the tweens and timeline or via scrolMagic event. Happy Tweening!
    1 point
  14. Now it will work in other browsers.
    1 point
  15. Hello @helleholmsen and welcome to the GreenSock Forum! I tested on Windows 10 on latest Firefox and Chrome. But could not replicate the light grey border you describe. What is the OS and OS version you see this on? Also what is the browser and browser version you are seeing this on? Any additional info can help us see what your seeing, Thanks
    1 point
  16. Hi @pattysheppard Here's a couple variations using a liveSnap function to limit rotation. The first one has one drawback which you may or may not want. If you rotate counter-clockwise, like say 3 times, you'll have to rotate clockwise 3 times before it starts rotating again. The second one keeps track of the change in rotation to eliminate that drawback.
    1 point
  17. Hey, im a complete beginner but im still going to try and help you. Maybe you could try this: Create a function like this: function function1here() { var tl = new TimelineLite(); // add the rest here return tl; // put this at the end. } function function2here() { var pw = new TimelineLite(); // add the rest here return tl; // put this at the end. } function createMasterTimeline() { timeline = new TimelineLite(); .add(function1here()) .add(function2here()) timeline.timeScale(1)//used to control the speed of the timeline } // now call the mastertimeline function createMasterTimeline() now you should be able to do what you want and you can create the individual timelines
    1 point
  18. Hi and welcome to the GreenSock forums, The problem with the repeating tween is that it makes the timeline's duration virtually infinite. When you add tweens to that same timeline in stopAnimation() function you are adding them at a time after when the previous tweens were added BUT the timeline has been continually playing past that point. In other words you are adding new tweens at a time that has already past which is why everything disappears immediately. Those new tweens you added complete as soon as they get added. I'm just making up numbers but lets say the startAnimation timeline has 6 seconds worth of tweens in it and an infinitely repeating tween. If you call the stopAnimation function at a time of 10 seconds (the repeating tweens cause it to play beyond 6 seconds) the new tweens will get added around a time of 6 seconds (in the past). In this case I would not add new tweens to the same timeline. I'd create two separate timelines in each function as shown below: This will work fine if you only need to start once and stop once.
    1 point
  19. In short, scope is the object that "this" refers to in a function. By default, the scope of a callback in a tween/timeline is the tween/timeline itself. With jQuery, most methods have the scope set to the element, which is what "this" refers to in the function. $("button").click(function() { TweenLite.to(this, 1, { color: "red" }); }); See if you can make sense of the scope here.
    1 point
  20. Wow, that is one of the weirdest bugs I've seen in a long time. Definitely a Safari SVG rendering bug. If you look at the resulting HTML/CSS that GSAP sets, it's identical between Safari and other browsers. I poked around and found that if I changed your <line> elements to be <path> elements instead, and made sure to avoid using the regular "L" (line) command (I used Cubic bezier instead), it suddenly fixed the issue! Here's a fork: It's actually not that hard to convert lines into paths. You just slap an "M" at the front (move), then put the first x,y, then put a "C" and the final x,y coordinates 3 times. Like this: <!--OLD--> <line x1="10" y1="25" x2="40" y2="25" /> <!--NEW--> <path d="M10,25 C40,25,40,25,40,25" /> (there are other ways to do it, of course, but that's a simple one) Does that help? I don't think this "fix" should be automated in GSAP because it involves some pretty significant changes to the underlying DOM that could mess people up. Like in your case, you had a selector looking for "line" elements, so if we just automatically changed all of those to <path> elements, your code would break because the selector text wouldn't apply properly anymore. I wish there was a super simple fix we could apply. But again, this is definitely a Safari rendering issue, not a GSAP issue.
    1 point
  21. Yes, Flash certainly had its advantages in some areas. What I have found for scaling text in chrome is that if you give the element a very slight translateZ value the scaling is much smoother. Take a look at this demo: http://codepen.io/GreenSock/pen/AGzci not jerky at all. This is the secret sauce: TweenLite.set(element, {autoAlpha:0, scale:0, z:0.01}); Let us know how that works for you.
    1 point
×
×
  • Create New...