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 08/02/2019 in all areas

  1. okay so I had an 'oh sh*t' moment and just tried this out of desperation and it seems to be working ?‍♂️ new SplitText('#intro h1', {type:'lines', linesClass: 'lineParent'}); new SplitText('#intro h1 .lineParent', {type:'lines', linesClass: 'lineChild'}); I feel a lil stupid for not having tried this earlier but I appear to be cooking with bacon now. Thanks to everyone who chipped in
    3 points
  2. There have, however, been other discussions here about using Barba in the past, maybe if you search around you'll find something that might be of use? https://greensock.com/forums/search/?page=1&q=barba
    2 points
  3. Nuxt does not like ES modules. Never has. Hopefullly, one day will. Like, the day Node does.
    2 points
  4. Right, I got it working. Bloody Nuxt and its ES5 underlying system. It really bothers me that you write in ES6+ syntax with Nuxt but their underlying import/export system is all UMD. In the end it was the SSR that was causing the trouble. It's late here and I won't write a full explanation right now. Might do later, might just update the repo I made to incorporate these quirks we've just found. Assuming you ARE using the UMD version of the premium plugins, chuck them into the vendor folder as originally suggested BUT DO NOT import them. You'll need to require those buggers. Because SSR. /* * The two bellow will not work */ // import GSDevTools from '~/assets/vendor/GSDevTools' // import SplitText from '~/assets/vendor/SplitText' /* * This will work. Why? Beats me, something to do with how backend, frontend works. */ if(process.client) { const SplitText = require('~/assets/vendor/SplitText') const GSDevTools = require('~/assets/vendor/GSDevTools') } export default { //... } One needs to really have some legacy knowledge to do the 1+1 = 2 here. https://nuxtjs.org/faq/window-document-undefined/
    2 points
  5. I'm on mobile right now so it's hard for me to give detailed advice. Using imports for premium pluguins and a cdn for gsap is going to cause problems because the plugins will try to import GSAP. To avoid mixing modules I would just copy the pluguins into your GSAP folder in node_modules and try following the advice in the docs. https://greensock.com/docs/NPMUsage However, Nuxt might have issues with importing es modules. Well it did last time I checked, but I can't really investigate right now. I'm out of town at the moment.
    2 points
  6. PS: You're mixing es modules and umd imports which messes stuff up.
    2 points
  7. My advice... GSAP works as a global. Stop wasting your time trying to import it and just load it through normal script tags. Your animation code will work just fine without the imports. All these importing problems should be resolved in the next version of GSAP
    2 points
  8. Hey Snoop, It'd be helpful to have a minimal demo of what you're suggesting. Just guessing, I'd guess it's because filter creates a new compositing layer? I'm also guessing that adding a translate3d instead would reproduce the same effect. You can read more about compositing in this Smashing Magazine post (though the ladder half is a bit too long for me).
    2 points
  9. CodePen is great for small interfaces and code snippets. You can use their 'Projects' to create full applications but you'll be limited by your account tier. For bigger applications or frameworks like Nuxt, CodeSandbox is a good option. Between CodePen and CodeSandbox you should be able to create anything your heart desire. Not that it helps much here as you're having issues with the Premium Club Greensock plugins. We kindly ask you to not put any of the premium plugins on open repositories or online editors. As for your issue, I don't see anything sticking out from reading your posts. What I'll do is, as soon as I find a little bit of downtime at work, I'll try and create a working prototype with the plugins you seem to be having an issue. Do you have a preference to any of them?
    2 points
  10. Hey @five.design, <button>: I moved the button in the html to activate it. Here is another suggestion: one of my first steps with GSAP - @OSUblake and the Forum team helped me a lot. https://codepen.io/osublake/pen/ZbPxjN Maybe it will help you - especially the matchMedia effect. Happy tweening ... Mikel
    2 points
  11. Glad to hear it works now. Thanks for letting us know. Kinda weird though. I did the same thing Zach did in trying it locally and had no problems. ? Oh well, you fought the gremlins hard today. Time to go enjoy some much deserved pizza. ? Happy tweening.
    2 points
  12. Appreciate you helping out from the road (and no expectation that you'll continue troubleshooting while traveling; I'm just posting back so it will be available when you have time and in case it helps Dipscom figure things out) I have now completed testing on DrawSVGPlugin, MorphSVGPlugin, Physics2DPlugin, PhysicsPropsPlugin, ScrambleTextPlugin, and ThrowPropsPlugin- and I've gotten all six of those (with 'plugin' in the name) to run successfully within my nuxt app - while all five Premiums without 'plugin' (CustomBounce, CustomEase, CustomWiggle, GSDevTools, and SplitText) lead to the failures and error messages I listed in a previous ppost. Looking inside my node_modules/gsap/ I do indeed see all the regular gsap files along with a package.json file. And there's also a subdirectory with umd version of the non-premium gsap files (node_modules/gsap/umd). I tried moving GSDevTools into that - so node_modules/gsap/umd/GSDevTools - and I no longer get a warning or error message when I do npm run dev, but on localhost:3000, can't bring up the site and says: ReferenceError - document is not defined and points toward node_modules\gsap\umd\GSDevTools.js as the problem.
    1 point
  13. @GreenSock There's definitely something fishy here. I can replicate some of the issues @mosk is reporting. Not quite sure why, though. The funny thing is, ThrowProps, for example, works. SplitText borks during build file. It might be SSR, thought. I'll need to look into it more later.
    1 point
  14. I'd probably just use one of the ScrollMagic event handlers. You could rotate those objects with a separate tween or timeline and call that tween with a scene end event handler or maybe fire it when the scene reaches a certain progress point. You could also just use a separate trigger. Keep in mind that ScrollMagic is not a GreenSock product. Check out the event docs here: http://scrollmagic.io/docs/ScrollMagic.Scene.html#event:end Happy tweening.
    1 point
  15. Hey @sashaikevich, Here is a slightly different approach (NO scrollMagic) - quite magical ... https://codepen.io/mikeK/pen/BXdbjQ Happy scrolling ... Mikel
    1 point
  16. @ZachSaucier, @PointC thanks for the reserources. I've been using add() in the same way for labels (I have yet to do any really complex timelines), but when I saw scrollmagic doing something different, I thought perhaps there's a a resons relating to optimization or clarity of code, or who knows.
    1 point
  17. How about removing jQuery from the equation? var introH1 = document.querySelector('#intro h1');
    1 point
  18. Have you tried this? var $introH1 = $('#intro h1')[0];
    1 point
  19. Just to add (ha) to Zach's excellent advice. You'll often use the .add() method to add a label or a function (without parameters) to the timeline. The biggest use, at least for me, is building a master timeline and adding nested timelines to the master. Check out this great article for all the details. https://css-tricks.com/writing-smarter-animation-code/ Happy tweening.
    1 point
  20. Hey sashaikevich, good question. As you can read about here, those two formats are equivalent (practically, though technically the first takes an extra function call, but that's not an issue for 99.999% of projects). The first is shorthand for the second. P.S. ScrollMagic is not a GSAP product and is unaffiliated with GSAP, so some of their docs about GSAP may not be accurate nor the recommended way to do things using GSAP.
    1 point
  21. Hey @digit.al.chemist and welcome to the forums! I'll start off by saying that this performance issue is definitely not GSAP's fault You've got a lot of animating happening including layered opacity changes so you're putting a lot of strain on the browser. With that beings said, I was able to get it to be a lot less janky in Firefox (there still is some jank on my computer) by making .symbol have position: absolute (and changing .symbolContainer to have a relative position). This helps Firefox know not to worry about the reflow of other elements. Maybe another person on these forums can help take away some more jank P.S. You should be careful using will-change
    1 point
  22. Hey @vialito, Welcome to the GreenSock Forum. Here is a slightly different approach (NO magicScroll) to achieve the desired (?): https://codepen.io/mikeK/pen/PMmyvm Happy tweening ... Mikel
    1 point
  23. If you want to make this work with ScrollMagic, here's a quick demo of what I was advising — measure each elements position from the top. Here I've just created a bunch of divs in a grid and looped through to create arrays which act as 'rows' in a master array of targets. I then create a new ScrollMagic scene for each 'row' and use the .staggerTo() method on the targets. Note: This is not responsive. It will only calculate on page load. You'll have to kill and recreate the ScrollMagic scenes on resize, but this should get you started. https://codepen.io/PointC/pen/aeJxJE Happy tweening.
    1 point
  24. Hi @Anand Makhija, This could be a way ... https://codepen.io/mikeK/pen/GyPYPZ Happy tweening ... Mikel
    1 point
×