All Activity

This stream auto-updates     

  1. Today
  2. PointC

    Warping elements on scroll?

    Behold the PIxi filter playground. https://pixijs.io/pixi-filters/tools/demo/ Happy tweening.
  3. GreenSock

    Importing drawSVG fails

    That's probably because you have tree shaking enabled in your build process and it sees you importing DrawSVGPlugin but never actually referencing it anywhere in your code, so it thinks it's unnecessary/wasteful and dumps it. The solution is what we mention in https://greensock.com/docs/NPMUsage - just reference it somewhere Like: const plugins = [DrawSVGPlugin]; //<-- just to reference it so it doesn't get dumped by your build process Yep. Those are generally the ones you'd use in a Webpack/bundler environment. The only time you'd use the minified files is directly in the browser (like if you're loading them in via a <script> tag). Hope that helps!
  4. Sorry, I have no idea what element you mean or how this relates to GreenSock. GSAP is an animation engine. It animates values. All rendering is done by the browser. If JavaScript can touch it, GSAP can animate it. It doesn't care what type of elements make up your design — DOM, SVG, canvas — it works with anything. If you have a GSAP specific question, we're happy to help and providing a demo with your question is always helpful. Thanks.
  5. Hi, I'm new here. I'm trying to figure out how to realize what's in the link rallyinteractive. However, I have some troubles in clamping the color block in the middle. Any help would be appreciated.
  6. PointC

    Scroll to div on mouse scroll up/down

    It's difficult to continue offering assistance and troubleshooting your project without a demo and just looking at a pasted wall of code. It's usually best to fork your own demo each time you have a new question so anyone helping you can see the progress you've made on your own. It also should not be your whole project. Just enough to demonstrate the problem/question. Thanks.
  7. Stephen Marshall

    Importing drawSVG fails

    Hello and thanks for the speedy reply...a few follow-up questions as I have not resolved the error yet: 1. if I use the method below, React throws a warning about not actually referencing 'DrawSVGPlugin' in your code, since in your animation code you would be using something like drawSVG: "100%" etc. Is that correct? In React at least, that syntax would only work if I was importing and using a component named <DrawSVGplugin/> somewhere in the same js or jsx file? import DrawSVGPlugin from "../../gsapPlugins/DrawSVGPlugin.js"; 2. I tried adding the files from several different folders and still get the same error, but with many versions I'm not sure I got the right one? The unzipped download has an src directory, and inside that you have src/esm <-- is that the es6 module version of the files? also tried src/bonus-files-for-npm-users...both of these give me the same error I've described. Same error with the files in src/uncompressed 3. I also tried the minified version, and I'm getting the error(s) below and the page won't load. It seems counter-intuitive to add a minified version of TweenLite to my gsapPlugins directory when Tweenlite already exists in node_modules directory via npm install gsap? I tried adding the TweenLite.min.js file to this same directory anyway but got the same errors, with some extra goodies too: Anyway, since the Dev Tools were working at one point, I'll play around with DrawSVG a bit more over the weekend in case this is what we call in the business a 'pebkac' issue (problem exists between keyboard and chair - lol). Will keep everyone updated if I figure it out!
  8. tun712

    Scroll to div on mouse scroll up/down

    @both Thanks ! 👍 Horizontal scroll is working with jquery 3.4. Need little help to add prev & next button for both horizontal demo. My code is not working, $(".btnPrev").on('click', function(e) { e.preventDefault(); goToPrevProject(); if (?????) { $(".btnPrev").addClass("hide"); } else { $(".btnPrev").removeClass("hide"); } }); $(".btnNext").on('click', function(e) { e.preventDefault(); goToNextProject(); if ((?????)) { $(".btnNext").addClass("hide"); } else { $(".btnNext").removeClass("hide"); } });
  9. RaoulUnger

    svg-clip-path animation problem in Safari

    Ok, thanks! The webpage version works now too, that was due to the page not having been saved (my mistake). Cheers!
  10. PointC

    svg-clip-path animation problem in Safari

    The problem in Firefox is that demo is using an old version of GSAP (1.18.0). If you switch to the latest version (2.1.2), it works correctly in FF for me. Happy tweening.
  11. RaoulUnger

    svg-clip-path animation problem in Safari

    Thanks for the answer! I updated my code with yours. You were right about the attribute-definition. I can see that the trick of the rectangle works in de codepen viewed in Safari. Weirdly enough, the same trick doesn't seem to work on the webpage where i'm testing the exact same code (again viewed in Safari): http://decamerone.info/test-greensock-werkt/ It get's weirder: that same page works fine in Chrome and Firefox (both on a mac and in windows), but your codepen doesn't animate in Firefox... Cheers!
  12. tun712

    Scroll to div on mouse scroll up/down

    @both Thanks ! 👍 Horizontal is not tried yet, working on vertical. It's working with jquery 3.4. But I've little problem, I'm unable to add or remove class active to nav li a var $navButtons = $("ul.nav li a").filter("[href^=#]"); this is not working for me. Below is my code to add navigation, please check var navList = ""; $(".slide").each(function (i) { navList += "<li><a href='#" + (i + 1) + "' class='slide-" + (i + 1) + "'></a></li>"; }); if ($('ul.nav').length < 1) { $("<ul class='nav'></ul>").prependTo($(".slides-container").parent()); } $('ul.nav').html(navList); $("ul.nav li a").on('click', function (e) { e.preventDefault(); }); Now I've little simplified scrolling code to find out problem, please check below var $window = $("section"); var $navButtons = $("ul.nav li a"); var $slidesContainer = $(".slides-container"); var $slides = $(".slide"); var $currentSlide = $slides.first(); //Animating flag - is our app animating var isAnimating = false; //The height of the window var pageHeight = $window.innerHeight(); //Going to the first slide goToSlide($currentSlide); /**Adding event listeners**/ $window.on("mousewheel DOMMouseScroll", onMouseWheel); /**When user scrolls with the mouse, we have to change slides**/ function onMouseWheel(event) { //Normalize event wheel delta var delta = event.originalEvent.wheelDelta / 30 || -event.originalEvent.detail; //If the user scrolled up, it goes to previous slide, otherwise - to next slide if (delta < -1) { goToNextSlide(); } else if (delta > 1) { goToPrevSlide(); } //event.preventDefault(); } /**If there's a previous slide, slide to it**/ function goToPrevSlide() { if ($currentSlide.prev().length) { goToSlide($currentSlide.prev()); } } /**If there's a next slide, slide to it**/ function goToNextSlide() { if ($currentSlide.next().length) { goToSlide($currentSlide.next()); } } /**Actual transition between slides**/ function goToSlide($slide) { //If the slides are not changing and there's such a slide if (!isAnimating && $slide.length) { //setting animating flag to true isAnimating = true; $currentSlide = $slide; //Sliding to current slide TweenMax.to($slidesContainer, 1, { scrollTo: { y: pageHeight * $currentSlide.index() }, onComplete: onSlideChangeEnd, onCompleteScope: this }); TweenMax.fromTo(".title span:nth-child(even)", 1, {y: "50%",opacity: 0}, {ease:SlowMo.ease.config( 0.4, 0.4),y: "0%",opacity: 1}); TweenMax.fromTo(".title span:nth-child(odd)",1, {y: "-50%",opacity: 0}, {ease:SlowMo.ease.config( 0.4, 0.4),y: "0%",opacity: 1}); } } /**Once the sliding is finished, we need to restore "isAnimating" flag. You can also do other things in this function, such as changing page title**/ function onSlideChangeEnd() { isAnimating = false; } Is it possible to convert nav li a into, <div class="nav"> <div class="slide-1">Slide 1</div> <div class="slide-2">Slide 2</div> <div class="slide-3">Slide 3</div> <div class="slide-4">Slide 4</div> </div>
  13. GreenSock

    Warping elements on scroll?

    GSAP can animate pretty much anything, but some of the effects in that demo look like they'd require special rendering for distortions (GSAP has nothing to do with rendering), so you'll probably want to look into something like Pixi.js. You could use GSAP to animate the skew/scale of the images on scroll if you want. But the filter/distortion effects will require something else. Happy tweening!
  14. GreenSock

    TweenPlugin plugins not working

    Also, maybe look into the LoaderContext stuff. I remember that being related to this in the Flash Player.
  15. GreenSock

    TweenPlugin plugins not working

    Yeah, that's more of a Flash Player question, not so much GSAP. A few random guesses to try (if possible): Use a crossdomain.xml file - See Adobe's docs for details, but here is an example that grants full access (put this in a crossdomain.xml file that is at the root of the remote domain): <?xml version="1.0" encoding="utf-8"?> <cross-domain-policy> <allow-access-from domain="*" /> </cross-domain-policy> In the embed code of any HTML wrapper, set AllowScriptAccess to "always" If possible, in the remote swf make sure you explicitly allow script access using something like flash.system.Security.allowDomain("*"); Not sure LoaderMax will help you at all, but it has a SWFLoader that you could try: http://greensock.com/asdocs/com/greensock/loading/SWFLoader.html Good luck!
  16. GreenSock

    svg-clip-path animation problem in Safari

    Yeah, Safari has quite a few really weird rendering bugs (totally unrelated to GSAP). Sometimes you've gotta "trick" it. In this case, it looks like it's creating a bounding box for the clip-path initially and never updating it as the transforms get applied. So I'd just add a <rect> in your <clipPath> so that it opens up that area. Here's a fork: https://codepen.io/GreenSock/pen/501dc1ba55a0cceb854f72d9377bdc8e Also, I'd probably follow the spec and have the clipPath defined as an attribute but that may not be a big deal.
  17. mikel

    Sticky Header - Smooth scroll

    Hi @phaneendravvk, Sometimes it is not easy to understand what is meant. Something like this example ...? https://codepen.io/mikeK/pen/XxwjqZ Happy scrolling and tweening ... Mikel
  18. Hi, I just joined this forum to learn if greensock will work well with Storyline360. I am just learning to use javascript with storyline. If you have any tips or sites that might help me I would really appreciate it. 

    My main question is; are you having any other issues using greensock with storyline? Does it work well with mobile devices, LMS or web applications?

     

    Thanks for any information,

    Dawn

  19. phaneendravvk

    Sticky Header - Smooth scroll

    Hi Mikel, I'm aware of those, my observation is to make a smooth & silky scroll using GSAP.. so that I've posted here. Thanks @phaneendravvk
  20. dunc001

    TweenPlugin plugins not working

    OK, so further testing confirms that if any other widget which also imports greensock loads ahead of mine that's when the fail happens. So your theory about the namespace being hijacked seems to hold true. I had a look in the Publish Settings and the only two settings I can see are the Local Playback Security (currently set to 'Access Local Files Only', other option is 'Access Network Only'), and Protect From Import (currently unchecked) which then asks me to input a password. Other than that is there anything else I can do to force my classes to use a specific version of greensock to make sure the TweenPlugin plugins load and function correctly? I don't have access to the source files for the other widgets so I can't alter them in any way.
  21. RaoulUnger

    svg-clip-path animation problem in Safari

    Hi, I'm trying to animate a SVG clip-path masking an image in such a way that it will work in all browers, including IE. I'm using Greensock because 'normal' css-animation on clip-paths doesn't work at all in IE. I've defined two paths within one clipPath, and animated them separately (different speeds). The included method seems to work in all browers, but there is one problem: Safari shows erratic behaviour: the bottom part of the circle often isn't drawn. Weirdly enough, it does draw when I 'inspect' the element to look at the code. In the pen you see the animated image on the left, and the entire image for reference on the right. The image is png with the parts outside the circle being transparent. Any thoughts would be appreciated!! I'm very new at Greensock, so please forgive me for not seeing the obvious... Thanks!
  22. mikel

    Sticky Header - Smooth scroll

    Hi @phaneendravvk, For such basics it is always helpful e.g. to visit the w3school: sticky header Kind regards Mikel
  23. mikel

    Spin pic

    Hi @Mansourhamad, Welcome to the GreenSock Forum. Such is e.g. possible with ScrollMagic - more info here. https://codepen.io/mikeK/pen/VNxpPB Happy tweening ... Mikel
  24. phaneendravvk

    Sticky Header - Smooth scroll

    Hi GSAP Team, Could i get assistance in making the smooth sticky header scrolling.. Red color is header which needs to behave as sticky header Thanks Phani
  25. Mansourhamad

    Spin pic

    hi , guys can you please tell how to Spin pic like this example \https://www.nytimes.com/interactive/2019/04/17/world/europe/notre-dame-cathedral-fire-spread.html?searchResultPosition=2
  26. redfawx

    Warping elements on scroll?

    Hi Everyone! First off thank you so much for taking the time to read this. I continue to see UI effects where websites are warping images on scroll. Similar to the effect linked here: https://dribbble.com/shots/6055511-From-Digital-to-Physical-Max-Shkret-Digital-Artist-Website Is this achievable with GSAP, if so how?
  1. Load more activity
  • Newsletter

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

    Sign Up