Jump to content
GreenSock

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

Leaderboard

Popular Content

Showing content with the highest reputation on 07/23/2019 in all areas

  1. @PointC Amazing! You're a hero! Always blown away by the support on these Forums, and the willingness to help on even non-gsap related issues. Tweaked it slightly to eliminate the hard line on top: https://codepen.io/elegantseagulls/pen/wVMXYG
    5 points
  2. Hello @Andrew Harris and Welcome to the GreenSock Forum! The reason it is not animating is if you look at your compiled SASS CSS, the selector #t1:after does not exist. I only see #t2:after and #t3:after in your compiled SASS CSS. Once you add #t1:after CSS rule inside your CSS, then you should not get that console error. You must make sure that the same exact CSS Rule your animating with the CSSRulePlugin is also in your CSS, very important I changed #t3:after in your CSS to #t1:after and you can see no errors get thrown. https://codepen.io/jonathan/pen/EqPdXo Here is an example of the GSAP CSSRulePlugin. Notice how i also have the same CSS Rules I'm trying to animate already defined in my CSS, so the CSSRulePlugin can find those CSS Rules to animate? .. Does that make sense ? https://codepen.io/jonathan/pen/eMLogz Happy Tweening!
    4 points
  3. How about something like this? https://codepen.io/PointC/pen/bXVPWY Does that help?
    4 points
  4. Welcome to the forums. I think this has more to do with your understanding of positioning in CSS than it does issues with GSAP. Maybe reading an article like "Scaling Responsive Animations" can help you even though the article doesn't mention GSAP specifically. It would be very helpful to us if you reproduced a minimal version of your positioning issues in a CodePen so that we can see the code more easily and it didn't get constantly updated like your live site likely will. You can read about doing so here: But from looking at your code, it seems that you have a mix of using top, left, x, y, and xPercent and yPercent. It's generally a good idea to try and stick to animating only one of these pairs because otherwise it can get confusing.
    2 points
  5. @DD77 That's not a trivial task. I'd recommend changing your approach completely if that's what you need to do. I'd recommend that you position all of your elements absolutely and position them using JS if you need to do that. It would make animating them properly a lot more easy. As is you'll have a lot of trouble adjusting your current setup to have that behavior.
    2 points
  6. Hi @PIBC-QingYe, I do not understand what you want to achieve. Here's a shot at the blind man. https://codepen.io/mikeK/pen/voLJdR Happy tweening ... Mikel
    2 points
  7. @Luckyde We're using the files from 'bonus-files-for-npm-users > umd` Also, TimelineMax isn't referenced in this CustomEase.js, so I have a feeling your error may be coming from somewhere else. Also, to elaborate on my first reply a bit: The important reason for not putting the file in the node_modules dir is that these files won't be referenced in the package.json file, so if someone were trying to work with your environment from a new machine (assuming your node_modules is in .gitignore as it should be), those files wouldn't be available to yarn/npm install etc.
    1 point
  8. Hi @Luckyde With our projects, we have a plugins directory that we import from as such: import CustomEase from './../static/plugins/CustomEase'; As far as using Require, I've found that I had to do so when using GSAP's premium products (SplitText, etc), which I access in a similar manner: require('../../static/plugins/SplitText.js'); with the Require, I need to add SplitText as an exception in the globals of the .eslintrc file. Hope this helps!
    1 point
  9. Glad you sorted out your issue. And I wasn't trying to discourage you from using ScrollMagic at all - I just wanted to be clear that it's not a GreenSock product so these forums may not always have answers for ScrollMagic-related questions, that's all. But I hear great things about ScrollMagic and plenty of people love using with GSAP. I don't have an alternate recommendation right now Happy tweening!
    1 point
  10. Welcome to the forums, @Pradeep KS. It's tough to troubleshoot by just looking at a few snippets of code, but I wonder if maybe you loaded your scripts AFTER your code? Just a guess. I'm also a bit confused about the way you're loading those scripts - I don't recognize that syntax. I'm used, to seeing <script> tags. If you're using a build system (looks like it since you've got node_modules), perhaps you need to import the proper classes? If you're still having trouble, please provide a reduced test case that reproduces the issue so we can take a peek. Also, please keep in mind that ScrollMagic is NOT a GreenSock product and we don't support it.
    1 point
  11. @danboyle8637 I made a scroll spy for a React app a while ago based on this repo: https://github.com/makotot/react-scrollspy. It is quite experimental and rudimentary, If you want I can look around to find it and give it to you so you can check it. The principle is quite simple, the code listens to the scroll event (I know is not the best way) of a main wrapper and compares the scroll top value with the position of the elements that you want to animate or in the use case of that particular project set the active menu item. When the scroll position exceeds the top position of an element and if the current element is different from the value stored in the state, it updates a visible property in the state. Like that the state is updated only once per element and not on every scroll update. Is not the most efficient way but is far more efficient than constantly updating the state on every scroll event.
    1 point
  12. Try pausing and playing the full timeline, not the inner one (because otherwise the full timeline will continue): https://codepen.io/ZachSaucier/pen/eqJYeX?editors=0010 Happy tweening!
    1 point
  13. Hi @Jiri Welcome to the forum and thanks for joining Club GreenSock. Using a different animation for reverse can sometimes be a bit tricky. Here are a couple threads that may be helpful. That being said, I think a simple toggle would work well in your case. Here's a fork of your pen. https://codepen.io/PointC/pen/wVKRbw Another option is to use one timeline with a pause in the middle. Here are a couple demos I made for different thread answer but they show the general idea. https://codepen.io/PointC/pen/oPELMe https://codepen.io/PointC/pen/GXQWJw Hopefully that info helps. Happy tweening and welcome aboard.
    1 point
  14. There's more good information on `.reversed()` here:
    1 point
  15. Hi @Jiri It's because your code is using the conditional `menuAnimation.reversed() ? menuAnimation.play() : menuAnimationBack.reverse()` Which plays fine the first time, because `menuAnimation.reversed()` is true, and when that animation is run it sets to false, which, then, isn't reset back to true by your `menuAnimationBack.reverse()`.
    1 point
  16. Was it ever the best option for scroll based animations? It just makes certain things more simple to do on scroll. Doing some things on scroll is fine. You need to be mindful of what you're doing on scroll though. And often times it's a good idea to throttle the scroll event.
    1 point
  17. Hello There , Swedish London based Rich Media Banner Developer & Designer, with over a decade of experience of building banners for a wide range of clients. Canvas or no canvas? No problem. Greensock or Pixie? Can do. Story-boarding needed? Yes. Video? You bet! Interactive Javascript or image slider? Consider it done! Can work over Zeplin or WeTransfer, whatever you prefer. A codepen sample of my work: https://codepen.io/ThomasJames/pen/RXQrzp Some of the companies I worked with: WWF, Wunderman Ogilvy Gamesys, TBWA\Copenhagen, MRM Meteorite, McCann, The Two Marias, NKD Learning, DOOH, York Press, TAG Worldwide Ad banner platforms I work with: Google Studio, Google Campaign Manager, Flashtalking, Celtra, Sizmek, Adform, Admeto, +Yours (Send me the specs!) Contact me at hello@thomasthorstensson.co.uk for more samples of recent work and a discussion of what you need done!
    1 point
  18. I wonder if you forgot to load CSSPlugin? Or just load TweenMax because that has it included.
    1 point
  19. Hello dileepkp and welcome to the forums! I'm not understanding what you're saying exactly and having trouble with. Are you saying that only one of these images is shown based on the client's browser's window size? And you need only the animation that corresponds with that window size to play? If so, I would detect the client's window size and use a series of if statements or a switch statement to determine which animation to play. If not, please be more clear in describing your situation. A minimal demo exemplifying your issue would be even more helpful
    1 point
  20. That's ... bizarre! I added the viewport meta tag to my demo page, and that did fix the issue for the demo page on the iPad (even with allowEventDefault set to true). My site's index.html page does have a meta viewport tag, though. So, for my card game at least (far more complicated than the demo I created), the "double click" thing is definitely coming from Draggable. When I remove the Draggable code, my other click events fire appropriately. When the Draggable is added, the click event fires twice on the iPad, which causes things to break. But then it got fixed, specifically on the iPad, when I set allowEventDefault to false. So I'm still scratching my head on this one. I will report back once I get the new Win touchscreen device, some time next week, to let people know the behavior on that device.
    1 point
  21. You should check out the examples i provided for the scrolling event. But for smooth scrolling you can try and use ScrollMagic, which is a scrolling management tool that uses GSAP as its animation platform. http://scrollmagic.io/ https://github.com/janpaepke/ScrollMagic Also @OSUblake did a simple scroll like magic with less bloat But some others in the forum might be willing to share there code of something similar
    1 point
×