Jump to content

Dipscom last won the day on July 19 2019

Dipscom had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Dipscom

  1. Hi @Moamm, It's very hard to help troubleshoot blind looking at a wall of code without context does not give me any insight on what might be going wrong. There are a few discussions here in the forums on how to work with BarbaJS, have you looked at those? https://greensock.com/forums/search/?&q=barbajs&search_and_or=or&sortby=relevancy If none of those can help you, we would ask you to provide a reduced-case demo of your situation in a online code editor of your choice so we can see the issue and the context live.
  2. It's what Visual-Q has pointed out: You're creating a bunch of new scenes and timelines and adding them to the ScrollMagic controller. Plus the fact that when you resize the screen and trigger an rebuild of your timeline you're not cleaning up the timelines or the inline style already in the elements. See bellow for a fork of your pen where things seem to work as you expect: https://codepen.io/dipscom/pen/oRBPdb?editors=0010
  3. Since you have no intrinsic representation of you binary nomenclature, I shall baptize you here as Nine, it will be far easier to type that than 100101110. You'll have to content yourself with a denomination bellow ten as you have not displayed any psionic abilities so far. Firstly well done on solving your own issue. But I have to say: working on a problem while others sleep is cheating. My two cents on you setup are as follows: I think you might be over engineering it a little here. I don't see the need of you having timelines and nesting them onto another timeline. A much simpler setup is to fire out single tweens that callback at their completion a method to line up a fresh new tween. [...] After nearly two hours tinkering with your example pen, it turns out that the issue of the colour not animating back to its original value was a very subtle but annoying overwrite conflict. I'm not sure I will make a good job of explaining here so, forgive me if it causes more confusion than it helps. The issue stems from you adding a tween to an element while it is still being tweened. GSAP will calculate the overwriting values and normally does a great job. Issues arise when the overwritting is happening when not intended - which was your case. As you had a random selector to pick the elements. To simplify your code, I removed the timelines and made all animations run as single tweens. That brought in a new set of issues with the overwriting because of the delay you want these tweens to have. The usual thing to do is to check if the element .isTweening() and do things from there. But! If you have a tween that is delayed, is paused or completed, it reports as not tweening. Sometimes the random nature of this setup meant that you would have a tween that was delayed but the random choice would pick this element again and set a new tween on it with another delay. Eventually, those two delayed tweens would end up matching up and the previously described unintended partial override would occur. The solution I came up with was to not have a delay on the Tween itself but delay the call to the creation of the tween instead, then have the tween play immediately. This way, the tween is either active or not existing at all. See here a fork of your pen with my changes: https://codepen.io/dipscom/pen/OYWQOa?editors=0010 (I changed the animation to make it easier to spot inconsistencier) Now I shall try and get some work done... Else I'll get in trouble.
  4. Yes Ronnys you need to add a separate script for the GSDevTools. In CodePen you use the following special url: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools.min.js?r=100 For your local projects, you will find the GSDevTools in your GSAP downloadble folder. Look into the 'src' folder and depending on how you are building your site/application, it will be in the 'bonus-files-for-npm-users' or it will be in 'utils' subfolder or the 'minified' and 'uncompressed' folders.
  5. Hi Ronnys, I have tested your example pen and have found it does work with GSDevTools. I did have to include the GSDevTools to your pen as there was none there. Can you confirm that you have included the GSDevTools script in your original test case? Regards,
  6. What is the state for? Will the timelines have tweens that react to the state? Or is it going to be static? I'm a little bit fuzzy on the end result. As a starting point, I try and keep everything that is not reactive outside the state so, I would have the timelines all created in a loop and stored as a non-reactive attribute.
  7. Yahs! Vue-themed question! Hi Binary-code named individual, welcome to the forums! Are you the 302, 12E, 9 or 456 representation? To your question: The repeat is part of TweenMax and TimelineMax, not TweenLite or TimelineLite. You will have to use TweenMax if you want to have the repeat and yoyo methods. What you thought of doing probably will work once you have TweenMax instead of TweenLite. Which, by the way, the kb saving you get from loading TweenLite, CSSPlugin, TimelineLite, EasePack is so negligible in a normal webpage that you might as well just load TweenMax instead.
  8. There is, you can always just call a function from inside the timeline. tl .to ('.iphone1', 3, {x: "-54%"}) .to ('.iphone2', 3, {x: "54%"}, "-=3") .from ('.iphone1-text', 0.3, {autoAlpha: 0}, "-=3") .from ('.iphone2-text', 0.3, {autoAlpha: 0}, "-=3") .to ('.iphone1-text', 3, {x: "-30%"}, "-=3") .to ('.iphone2-text', 3, {x: "30%"}, "-=3") .set ('.iphone-stick', {display: "block"}) .call(playTween); function playTween() { Tween.to('.class', 1, {x:100}); } But note you will probably have to use a .fromTo() if you want that tween to replay every time your user is scrolling down and there is not a 'out of the box' way to know if the user is scrolling up after scrolling down.
  9. You will have to define what you mean by 'in-sync'. To me, it looks like there is a point on your journey that you want this secondary animation to happen. Let's call it 50% of the viewport. If, the element you are animating is already at that spot, use it to trigger the animation. Makes sense?
  10. So, correct me if I am wrong: You want an animation to play independently of the user scrolling when the user as reached a certain point in the scrolling of the page, right? If that's what you are after, it is what I have said: you need a different scene added to the controller. That scene will have its own trigger, no duration and you can choose exactly where in the scroll of the page to set it off.
  11. Hi mado1, I imagine you are aware but, in the event that you are not, please see the following disclaimer: "ScrollMagic is not a GSAP product, therefore is not officially supported here. However, that does not stop anybody who wants to, to jump in and offer assistance". You are mistaken when you state the following: When you set ScrollMagic's duration to "100%" it means the scroll distance used by it is the same as the viewport size. In your example's case it will the viewport height. Your tween/timeline that is linked to that scene will have its progress locked to that distance, meaning your tween/animation will have the same duration as the distance (vertically) scrolled - The viewport height. If I understand your requirement correctly, all you need to do to achieve your desired effect is to have a trigger that matches the location of the element you want to animate on a completely separate scene to this initial scene you have created.
  12. Just to clarify for anyone who might come by this: GSDevTools is a Club GreenSock benefit. You can try it for free on CodePen but you will have to be a club member to use it on your own projects outside CodePen.
  13. Look at you lot, making translating boxes on a screen fashionable.
  14. Blissifully happy as one with the universe.
  15. First a disclaimer: "ScrollMagic is not a GSAP product, therefore is not officially supported here". However, that does not stop anybody who wants to, to jump in and offer assistance. Now to quote the illustrious @PointC: Tell me, what is the expected behaviour? The media query appears to be working to me. What should I be seeing if what you intended to achieve had worked?
  16. If you want limit the amount of code that goes into your bundle, including the external libraries using the <script> tag is still a great solution. It will be cached, won't need to be re-downloaded whenever you edit your code, you can upadate its version independently of your bundle. This goes to GSAP as well. Unless you have any particular reason to include it in you bundle, there's nothing that says you should bundle it in.
  17. Nice input @intouch, thank you. I do believe you only need to transpile if you are importing the E6 modules version. https://nuxtjs.org/guide/plugins/#es6-plugins I've added a note onto the example repo to include the transpile option.
  18. Here you go, I had some downtime today and decided to have a crack at it. https://codepen.io/dipscom/pen/JqKZbv
  19. Can one imagine what a .max version of TweenMax would be like? ? Wormholes would appear, light would bend, world peace!
  20. Hi DD77, It appears you have found our previous discussion on the masking of images given the pen you have forked. Given that the original pen works as a full screen reveal, what did you change? That will be the root of your issue here. If I understand your request correctly, you need to create a timeline onLoad that goes from 0 to 100% of the screen. Add a pause at halfway its progress. Then, have some logic on the click event to detect if the timeline is at its end. If it is, play reverse it. If it isn't, play forward. Does it make sense? ps: You will have to make sure you recreate your timeline every time the window is resized.
  21. Hello @mtkramer, Welcome to the forums! It's very hard to troubleshoot blind. There could be a ton of variables we are not aware of. Are these two timelines animating the same set of paths? If yes, are the timelines overlaping? It really would help if you could produce a reduced case demo to showcase your issue, right now, we'll be guessing here. And my guess is that you are animating the same bunch of paths, offseting the timelines by 0.3 second but the timeline is actually 0.7 seconds (0.35 times 2) and because of that, the resulting overlapped animation is not what you were expecting.
  22. I should have said 'we try to keep this focused on the GSAP[...] but there is no law stopping people from jumping in and sorting it out'.
  23. Hi Tejaxx7, Welcome to the forums! I am sorry but this is not a GSAP related question, we need keep this forums focused on GSAP API and usage or we won't be able to handle the demand. For generic questions like that you will be better off going to other forums, like StackOverflow.