Jump to content

All Activity

This stream auto-updates     

  1. Past hour
  2. Yeah, all the info is in the docs, but you're right. Some things are not immediately obvious when you go to set up a real world project. The best advice I can give is to start with the learning section: https://greensock.com/learning After that you can learn a ton by reading through all the threads here on the forum. Maybe pick a section of the docs to read through each week too. Visiting CodePen and looking for GSAP based pens is always a great way to learn. Find something you like, fork it and then tear it down line by line until you understand what's happening. We're always here if you need any GSAP related assistance. Providing a concise demo (as you did already 👍) is the best way to get answers to your problems/questions. Happy tweening.
  3. yes, that one uses setTimeout behind the scenes, also that code is in the sidebar i was talking about
  4. No, but are you using a setTimeout? That can cause problems with animations as it's not tied to the UI. If someone changes tab, the setTimeout will fire, but the animation might not. But this piece of code is what I meant by doing debounced calls. computed: { debouncedScrollTop(){ return debounce(() => this.scrollTop(), 1000) } }
  5. by debounce you mean a call that is placed inside a setTimeout, right? the only debounced call like this is in the sidebar, but that element is never deleted or hidden from the page
  6. Yeah, I don't see how anything could happen in there. Where something could go wrong is the time in between a debounced call.
  7. oh, right.. I will check and will come back with results tomorrow most likely, but I highly doubt it because I've tried to set a 10seconds Tween and to delete the element in the middle of it and there was no error.. The last thing remains if the element is deleted somehow between TweenLite.to() and the _unwrapElement but I don't see how
  8. I think that you might like working with another tool called ScrollMagic in addition to GSAP to rotate text on scroll. @PointC recently wrote this very helpful article on how to get started with GSAP + ScrollMagic. You might be most interested in demo 3 but you can modify the demo to rotate on scroll instead of just move and change size. If you run into any issues, you can create a minimal demo of the issue on CodePen and we can help you out. See the below post for more information on how to do that.
  9. I understand that. If you can verify that it's null at the time of the error, then the problem likely has nothing to do with with GSAP itself, and is probably further upstream in your codebase.
  10. Hi, ZachSaucier Thank you for reply. I want to create animation scroll with rotating content currently i have created on this url http://blivetest.com/development/puneet/version15/clients.html but there is issue. This is not like that previous example. I have send admin details on your email.
  11. Today
  12. Hey Remi and welcome to the forums! A very rough way to think about scoping is that any variables created within a set of brackets { } cannot be seen by things outside of those brackets. But the areas within brackets can see their parents and grandparent's variables just fine. That's why the variable needs to be outside of the function as Blake suggests.
  13. Hey Puneet, I replied to your email, but it's worth answering here as well. We don't have access to all of the code for showcase websites but we'd be happy to help if you're having trouble recreating a specific part of the webpage that you linked. Is there a particular aspect that you're trying to recreate? What issues have you faced in attempting to recreate it?
  14. Hi @Demky, Please look at this page: https://greensock.com/docs/TimelineMax/reversed() .reversed( value:Boolean ) : Gets or sets the animation's reversed state which indicates whether or not the animation should be played backwards. myAnimation.reversed( true ); //sets the orientation to reversed myAnimation.reversed( !myAnimation.reversed() ); //toggles the orientation Happy tweening ... Mikel
  15. You need to save a reference to your tween outside of a function. It's as simple as this: var myAnimation = TweenMax.to(".daclass",0.2, {rotation:15, transformOrigin:"left 50%", repeat: -1, yoyo:true }); If you need it to to be created by a function, you must return the tween. function loopedTweenMax(){ return TweenMax.to(".daclass",0.2, {rotation:15, transformOrigin:"left 50%", repeat: -1, yoyo:true }); } var myAnimation = loopedTweenMax(); Now you can control "myAnimation" inside of other functions. Notice how I removed your onComplete. Just use repeat: -1 to repeat infinitely. https://codepen.io/osublake/pen/ZdgBYg
  16. Hi all! I have played with javascript for a long time now, and like 10 years ago had a lot of fun with Tweenlite... But i'm an artist ... brain has a very hard time thinking like a programmer hehehe I reproduced my issue with a codepen, if anyone is generous enough to help me pass that little wall of mine, I was always very bad with scope, and I'm pretty sure that's my issue: ive read around and sweared at this for a few hours: https://codepen.io/RemiTurcotte/pen/orKzvr Working on a new site here, I dont know why, but I can only tweenmax my svg when I'm in a function (???) all the other ways i see online and try like var=something fail. ALL the examples i see for pause() and restart() are like myAnimation.pause(); I dont care if my tweenmax is in a function, i can live with that, but how do i pause & restart it then? anyone? (10000000 thanks in advance) (its my first time in codepen too, and im not sure the link works so im copy pasting my js code under here in case...) function loopedTweenMax(){ TweenMax.to(".daclass",0.2, {rotation:15, transformOrigin:"left 50%", repeat:1,yoyo:true,onComplete:loopedTweenMax}); } loopedTweenMax(); function pauseLTM(){ console.log("paused"); // how can i reach my tweenmax to pause it? } function restartLTM(){ console.log("restarted"); // how can i reach my tweenmax to pause it? }
  17. I want to create animation with scroll like that example (http://hki.paris/about/). Can you please explain what java script file i have to include. Thank you.
  18. thank you for the information (and the new option) it make sense. tl.reversed(!tl.reversed()) 🤯🧠 i don't want to waste your time but how should one find this information(reversed:true)? I tried to find the solution and didnt find it 😴; did you just knew it or did you read it somewhere ? reading https://greensock.com/docs/TimelineMax to see if I missed it
  19. TweenChecker is a copy/paste of _unwrapElement that return either the element, or null I could not reproduce. I'm working only based off error reporting
  20. I'm at lost here. Maybe @GreenSock can chime in and see if anything sticks out. Are you able to reproduce the error yourself, or are you just going off of some logs? If line 51 is causing problems, then I would inspect what this returns: _unwrapElement(element) And what this returns: var elem = TweenChecker(target);
  21. Yesterday
  22. I am using Vue and all elements are referenced with ref I only have 2 calls that involves referencing elements as target (the rest are target = window). One of them is a sidebar that never gets hidden and has //<div class="sidebar" @mouseleave="debouncedScrollTop()" @mouseenter="debouncedScrollTop.cancel()"> // <div class="holder" ref="scrollElement" v-perfect-scroll="{ suppressScrollX: true }" v-on:ps-scroll-y="debouncedUpdateLeftBoxPositions"> // </div> //</div> export default { methods: { scrollTop(){ this.$scrollTo(this.$refs.scrollElement, 0.5, { scrollTo: 0 }) } }, computed: { debouncedScrollTop(){ return debounce(() => this.scrollTop(), 1000) } } } the this.$scrollTo is the wrapper in the first post. I have no v-ifs in this sidebar, the element is always there. the v-perfect-scroll is a directive that applies new PerfectScrollbar(target) -> this 3rd party does not replace the element, only applies some classes and some children elements the second one is a modal component that is always in the DOM of the current component. The js method is this export default { methods: { scrollToTop(){ if(!this.$refs.thumbsHolder) return false this.$scrollTo(this.$refs.thumbsHolder, 0.5, { scrollTo: 0 }) } } } In both cases: the element is always in the DOM and is called only by its parent component, so it is not called before it was rendered My initial thought was that the modal was causing problems when the route would change and the modal would disappear in the middle of the Tween. But I've set a tween of 10 seconds and changed the view in the middle of it and it did not cause any problems I really don't have anything more to show you guys... I've set a wrapper that explicitly checks the target element and it exists at the moment I fire TweenLite.to. The real component is more complicated and I cannot copy/paste it here. I've tried to remove unnecessary children from the template and chunks of js to be more readable.. But other than what I already posted, there is not much more relevant stuff to see I've fallen back to jQuery animate for now to see if it generates similar error
  23. It would help if you can show us what is going so we can try to reproduce the error. My first guess would be that you are using a framework like React, Vue, Angular, etc, and not properly referencing the element i.e. you are using a string to select elements instead of using refs.
  24. The error keeps coming from Sentry from a user using windows xp and chrome v49.0.2623, and several users using windows 10 and Edge v18.17763 browser I went and looked inside the scroll plugin and found that it had a method _unwrapElement or something like this that could return null if the element didn't existed. So, I made a wrapper function that would check the element with the exact same function before calling TweenLite.to() Here is the code // gsap/ScrollToPlugin.js -> _unwrapElement var _window = _gsScope; function TweenChecker(value){ if (typeof(value) === "string") { value = TweenLite.selector(value); } if (value.length && value !== _window && value[0] && value[0].style && !value.nodeType) { value = value[0]; } return (value === _window || (value.nodeType && value.style)) ? value : null; } // wrapper to check if element exists before firing this function scrollTo(target, duration, vars){ var elem = TweenChecker(target); if(elem === null) return false; if(!elem) return false; TweenLite.to(target, duration, vars); } I have replaced all TweenLite.to calls with scrollTo calls, this is the only place that TweenLite is being fired from. The error is reported at ./node_modules/gsap/ScrollToPlugin.js in _getOffset at line 51:1 50: _getOffset = function(element, container) { 51: var rect = _unwrapElement(element).getBoundingClientRect(), <------------- this one Right now I'm lost and ran out of ideas. I do not understand why it would cause errors in edge & old chrome because those are basic DOM functions that are being used under the hood... Any ideas?
  25. PS I don't know anything about Adobe XD or how it exports assets, but I wrote a little bit about Adobe Illustrator exports here: Maybe it'll help. Happy tweening.
  26. I rewrote it following a similar approach to the post @Rodrigo linked, however I'm experiencing another issue when one submenu is open and must be reversed before the other one opens. For example, click ONE, then SEVEN or SEVEN, then ONE. https://codesandbox.io/embed/gsap-test-uct1n
  27. Yeah that makes sense otherwise the ubiquitous document.ready would fail all the time too. Thanks for the info @Jonathan
  28. ZachSaucier

    Animate only once

    Hello Nexal and welcome. As SARFEX commented, this can be done using cookies or localstorage (I'd not recommend using IndexedDB for something this simple). I'd search for something like "js tell if user has visited page before" to find more information about how to do so. Basic approach: Check to see if a specific cookie or localstorage exists. If it does, don't animate. If it doesn't exist, animate whatever you want to animate and create the cookie/localstorage that you're looking for. Let us know if you run into any issues, especially related to the GSAP part of your code!
  1. Load more activity
  • Newsletter

    Want to keep up to date with all our latest news and information?
    Sign Up