Jump to content
GreenSock

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

Search the Community

Showing results for tags 'scrolltoplugin'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 26 results

  1. Dear GreenSock-Team, first of all: Congratulations! ScrollTrigger is really impressive and my mouth is still open. Nevertheless I probably came to the limit of this Library. I really like the Horizontal Scroll-Demo, but I didn't managed to include 2 things: 1) I like to add a kind of parallax-effect of the (in this case) headlines from left to right. I didn't find a way to target the headline and let them sit in the original position (in this case centered) when snapped to a slide and using the scrub-method, so you have full control of the (in this case) headline. 2) I doesn't seem to be possible to use the ScrollToPlugin to go to a specific Slide, since it's rather a horizontal movement. I also tried to use the native supported window.scrollTo(x, y)-function. Funny enough in this case it works only if you enter a y-value. It there a possibility to also use the ScrollToPlugin? Thanks in advance, John
  2. Hello everyone, I hope this is a simple question: Is it possible to jump/scroll to animations that are linked to ScrollTrigger (scrubbed)? With ScrollTrigger.scroll() I can't use timeline labels (like with Timeline.tweenTo()), ScrollToPlugin doesn't work either. Any ideas?
  3. I am trying to develop an infinite canvas animation which show cases a number of clickable images on it. On moving the cursor the images will move in the opposite direction, I tried this with div now, is it possible to use Canvas for an infinite scroll effect. Plugins used: TweenMax, TweenLinte, ScrollToPlugin, Draggable
  4. Hi, I'm struggling doing something very simple, can someone explain me what's wrong with this : $('a').on('click', function(e){ e.preventDefault(); var thisId = $(this).attr('href'); console.log(thisId); TweenMax.to(window, {duration: 2, scrollTo: thisId}); //TweenLite.to(window, {duration: 2, scrollTo: thisId}); //TweenMax.to(window, {duration: 2, scrollTo: {y: '100', offsetY: 50}}); //TweenMax.to(window, {duration: 2, scrollTo: 400}); }); I'm unable to make this work even tho it seems to be very simple to make it work, I'm following the documentation (well, I guess) : //scroll to 400 pixels down from the top gsap.to(window, {duration: 2, scrollTo: 400}); //or to scroll to the element with the ID "#someID": gsap.to(window, {duration: 2, scrollTo:"#someID"}); //or to specify which axis (x or y), use the object syntax: gsap.to(window, {duration: 2, scrollTo: {y: 400, x: 250}}); In my code, none of the commented is working + I'm using the old version of GSAP : TweenMax et ScrollToPlugin: Version 2.1.3 Thank you ////////////////////////////////////////// Well, I'm not really sure why the documentation has been totally modified for the new version of GSAP, without leaving any information about the previous versions : so for the previous version : TweenMax.to(window, 2, {scrollTo: thisId}); and for the new version : TweenMax.to(window, {duration: 2, scrollTo: thisId}); Is it possible to still have access to the documentation for the previous Versions of GSAP or it has been deleted for ever?
  5. I have a really simple usage of the ScrollToPlugin but I get the following error: TypeError: Value can't be converted to a dictionary. Even if I do the following (with hard coded values) I get the same error. TweenMax(el, 1, scrollTo: { x: 200, y: 0}); Is the ScrollToPlugin included with TweenMax? That's my assumption. Any help here is greatly appreciated.
  6. Hello, I'm very new to GSAP and am trying to figure out how to pause a tween on the hover of a specific div. The code for the auto scroll was corrected in a previous forum post, but I'm now trying to make this slight adjustment because the aforementioned div is a slider. So when the mouse hovers over this div, the animation needs to pause in order for the user to click through the slides. I'm not sure if I need to assign a timeline to my tween, etc. in order to accomplish this? I've tried to implement some examples from the docs, but nothing has worked; just wanting to see if there's a method simpler than determining if the cursor is in its bounds. Any help is greatly appreciated!
  7. I'm trying to implement an 'auto scroll' of sorts based on mouse movement/position. I'm new to GSAP; I'm hoping someone can point out my errors/help me to make this animation smoother and continuous? Adapted from: Additionally, here is the live (very rough) preview on my site: https://www.tessa.studio/portfolio Thanks in advance. Edit: The parallax effects on hover are, or at least appear to be, independent of my issues with the ScrollToPlugin... It's still laggy when I comment that portion of the script out. These effects are the reason for wanting to scroll with mouse movements.
  8. GreenSock

    GSAP 1.19.0 Released

    Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. GSAP version 1.19.0 introduces some exciting new features for advanced users as well as conveniences for everyone (even the "greenest" novices). The most noteworthy improvements are summarized below: Function-based values Instead of a number (x:100) or string (width:"300px") or relative value (y:"+=50"), you can now define most values as a function that'll get called once for each target the first time the tween renders, and whatever is returned by that function will be used as the value. This can be very useful for randomizing things or applying conditional logic. See it in action in the demos below. See the Pen BzmGba by GreenSock (@GreenSock) on CodePen. ...and more GSAP 1.19.0 is more ES6-friendly (for example, you can npm install gsap and then import {TweenLite, Elastic, TimelineMax} from "gsap" in your project). Plenty of bug fixes too. See the whole list in the github changelog. DOWNLOAD GSAP TODAY Happy tweening!
  9. Hi ! I'm trying to animate scroll position of an element using ScrollToPlugin. It looks like it doesn't work with Vue, and i wonder why. I've been following docs and tutorials, but it's failing for some reason. PS : example includes a non-supported target, but even if using numeric value, same problem occurs. I just wanted to ask for support of this fashion at the same time :) Thanks a lot !
  10. I ve implemented this codepen smoothScroll on my project, it works in all browsers except Firefox, any idea why it didn't work please? Thank you in advanced.
  11. Hi I am having a conflict I can't replicate. The solution works fine in the codepen( If you look at the codepen in IE10, the effect works perfectly (place div in center of viewport on click), but in my finished page, the scrollTo just goes all over the place and lands in a different position each time. It works fine in IE11 but not IE10 which is a requirement for my client. I tried matching the codepen function exactly to my production functions but the error still occurs. Here is a copy for your review that is condensed: window.onload = function(){ // Scroll to X and Y position buttons // bullet points var logoBtn = document.getElementById("logo"); var section1Btn = document.getElementById("section1Btn"); var section2Btn = document.getElementById("section2Btn"); var section3Btn = document.getElementById("section3Btn"); var section4Btn = document.getElementById("section4Btn"); var section5Btn = document.getElementById("section5Btn"); var section6Btn = document.getElementById("section6Btn"); var section7Btn = document.getElementById("section7Btn"); // menu buttons var firstnav = document.getElementById("firstnav"); var secondnav = document.getElementById("secondnav"); var thirdnav = document.getElementById("thirdnav"); var fourthnav = document.getElementById("fourthnav"); var fifthnav = document.getElementById("fifthnav"); var sixthnav = document.getElementById("sixthnav"); var seventhnav = document.getElementById("seventhnav"); var firstdot = document.getElementById("firstdot"); var seconddot = document.getElementById("seconddot"); var thirddot = document.getElementById("thirddot"); var fourthdot = document.getElementById("fourthdot"); var fifthdot = document.getElementById("fifthdot"); var sixthdot = document.getElementById("sixthdot"); var seventhdot = document.getElementById("seventhdot"); // buttons on central spinning circle var firstcirclebtn = document.getElementById("invisible-btn1"); var secondcirclebtn = document.getElementById("invisible-btn2"); var thirdcirclebtn = document.getElementById("invisible-btn3"); var fourthcirclebtn = document.getElementById("invisible-btn4"); var fifthcirclebtn = document.getElementById("invisible-btn5"); var sixthcirclebtn = document.getElementById("invisible-btn6"); // Scroll to Bullets logoBtn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:"#firstdot", offsetY: $(window).innerHeight() / 2 - $('#firstdot').height() / 2, x:"#firstdot", offsetX: $(window).innerWidth() / 2 - $('#firstdot').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; // Scroll to Start div id on page load TweenLite.to(window, 1, {scrollTo:{y:"#firstdot", offsetY: $(window).innerHeight() / 2 - $('#firstdot').height() / 2, x:"#firstdot", offsetX: $(window).innerWidth() / 2 - $('#firstdot').width() / 2, autoKill:false, behavior: 'smooth'}},100); // Scroll to Bullets section1Btn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:"#firstdot", offsetY: $(window).innerHeight() / 2 - $('#firstdot').height() / 2, x:"#firstdot", offsetX: $(window).innerWidth() / 2 - $('#firstdot').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; section2Btn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:"#seconddot", offsetY: $(window).innerHeight() / 2 - $('#seconddot').height() / 2, x:"#seconddot", offsetX: $(window).innerWidth() / 2 - $('#seconddot').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; section3Btn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:"#thirddot", offsetY: $(window).innerHeight() / 2 - $('#thirddot').height() / 2, x:"#thirddot", offsetX: $(window).innerWidth() / 2 - $('#thirddot').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; section4Btn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:"#fourthdot", offsetY: $(window).innerHeight() / 2 - $('#fourthdot').height() / 2, x:"#fourthdot", offsetX: $(window).innerWidth() / 2 - $('#fourthdot').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; section5Btn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:"#fifthdot", offsetY: $(window).innerHeight() / 2 - $('#fifthdot').height() / 2, x:"#fifthdot", offsetX: $(window).innerWidth() / 2 - $('#fifthdot').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; section6Btn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:"#sixthdot", offsetY: $(window).innerHeight() / 2 - $('#sixthdot').height() / 2, x:"#sixthdot", offsetX: $(window).innerWidth() / 2 - $('#sixthdot').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; section7Btn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:"#seventhdot", offsetY: $(window).innerHeight() / 2 - $('#seventhdot').height() / 2, x:"#seventhdot", offsetX: $(window).innerWidth() / 2 - $('#seventhdot').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; // menu nav // Scroll to Bullets firstnav.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".first-coordinate-2", offsetY: $(window).innerHeight() / 2 - $('.first-coordinate-2').height() / 2, x:".first-coordinate-2", offsetX: $(window).innerWidth() / 2 - $('.first-coordinate-2').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; secondnav.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".second-coordinate-2", offsetY: $(window).innerHeight() / 2 - $('.second-coordinate-2').height() / 2, x:".second-coordinate-2", offsetX: $(window).innerWidth() / 2 - $('.second-coordinate-2').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; thirdnav.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".third-coordinate-2", offsetY: $(window).innerHeight() / 2 - $('.third-coordinate-2').height() / 2, x:".third-coordinate-2", offsetX: $(window).innerWidth() / 2 - $('.third-coordinate-2').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; fourthnav.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".fourth-coordinate-2", offsetY: $(window).innerHeight() / 2 - $('.fourth-coordinate-2').height() / 2, x:".fourth-coordinate-2", offsetX: $(window).innerWidth() / 2 - $('.fourth-coordinate-2').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; fifthnav.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".fifth-coordinate-2", offsetY: $(window).innerHeight() / 2 - $('.fifth-coordinate-2').height() / 2, x:".fifth-coordinate-2", offsetX: $(window).innerWidth() / 2 - $('.fifth-coordinate-2').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; sixthnav.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".sixth-coordinate-2", offsetY: $(window).innerHeight() / 2 - $('.sixth-coordinate-2').height() / 2, x:".sixth-coordinate-2", offsetX: $(window).innerWidth() / 2 - $('.sixth-coordinate-2').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; seventhnav.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".seventh-coordinate-2", offsetY: $(window).innerHeight() / 2 - $('.seventh-coordinate-2').height() / 2, x:".seventh-coordinate-2", offsetX: $(window).innerWidth() / 2 - $('.seventh-coordinate-2').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; firstcirclebtn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".second-coordinate-3", offsetY: $(window).innerHeight() / 2 - $('.second-coordinate-3').height() / 2, x:".second-coordinate-3", offsetX: $(window).innerWidth() / 2 - $('.second-coordinate-3').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; secondcirclebtn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".third-coordinate-3", offsetY: $(window).innerHeight() / 2 - $('.third-coordinate-3').height() / 2, x:".third-coordinate-3", offsetX: $(window).innerWidth() / 2 - $('.third-coordinate-3').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; thirdcirclebtn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".fourth-coordinate-3", offsetY: $(window).innerHeight() / 2 - $('.fourth-coordinate-3').height() / 2, x:".fourth-coordinate-3", offsetX: $(window).innerWidth() / 2 - $('.fourth-coordinate-3').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; fourthcirclebtn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".fifth-coordinate-3", offsetY: $(window).innerHeight() / 2 - $('.fifth-coordinate-3').height() / 2, x:".fifth-coordinate-3", offsetX: $(window).innerWidth() / 2 - $('.fifth-coordinate-3').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; fifthcirclebtn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".sixth-coordinate-3", offsetY: $(window).innerHeight() / 2 - $('.sixth-coordinate-3').height() / 2, x:".sixth-coordinate-3", offsetX: $(window).innerWidth() / 2 - $('.sixth-coordinate-3').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; sixthcirclebtn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".seventh-coordinate-3", offsetY: $(window).innerHeight() / 2 - $('.seventh-coordinate-3').height() / 2, x:".seventh-coordinate-3", offsetX: $(window).innerWidth() / 2 - $('.seventh-coordinate-3').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; }(jQuery); There are other jquery plugins I have used, so perhaps the conflict is from there? <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollToPlugin-latest-beta.js"></script> <!-- Bootstrap pre built stuff--> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> The console shows no errors so its hard to debug. Any help would be greatly appreciated, it's the last obstacle of the project!
  12. Hi everyone, I have an issue in ScrollMagic. I'm interesting in to find if somebody discovered the same issue. I want to have the same effect on scroll like on the link below. See the last codepen on this link: The plugin reacts instantly on window, on scroll, but on a container has a delay of ~0.5s, only on Internet Explorer. Can anybody explain this?
  13. Hello all, I just had a problem with iOS 10 Safari and the ScrollToPlugin, there are some changed that now will trigger the autoKill function. It has taken me more than a hour to realize that it was the autoKill function who stopped the animation. (iOS9 Safari didnt had this problem) Just for people with the same problem (I think almost everybody who is using ScrollToPlugin) for now just add "autoKill:false": TweenLite.to(window, 1, {scrollTo: {y:2000, autoKill:false}, ease:Power2.easeInOut}); Sorry for no Codepen but you can easily try it out with the Safari Developers Debug, just open a page that is using GSAP on your iPhone en run code without autoKill:false. (Sometimes it will not autoKill it, but almost always). Hope that I have made someone happy with the same problem Greets! Vincent
  14. Hi when cloning any node on the page, the scrollTo plugin no longer works, is there a way around this? I've taken the default Codepen example and cloned an element to demonstrate the issue.
  15. I have this code when content load. And i have my .menu-content as a modal box. Position fixed, full screen with an inner scroll. And i have a bunch of anchor links targeting to a section block inside the .menu-content <a href='#section1'></a> <a href='#section2'></a> <a href='#section3'></a> <a href='#section4'></a> <div class='menu-content'> <section id='section1'>...lorem ipsum.....</section> <section id='section2'>...lorem ipsum.....</section> <section id='section3'>...lorem ipsum.....</section> <section id='section4'>...lorem ipsum.....</section> </div> I just want a click event in the link that scroll into that section. Something similar to this Codepen import 'gsap/TweenLite'; import 'gsap/CSSPlugin'; import 'gsap/ScrollToPlugin'; document.addEventListener('DOMContentLoaded', () => { let links = document.getElementsByClassName('menu-list')[0].querySelectorAll('a'); for (let link of links) { link.addEventListener('click', (element) => { element.preventDefault; var options = { scrollTo: { y: element.target.hash, autoKill: false, offsetY: 268 }, ease: Power1.easeOut }; var scrollbarContainer = document.getElementsByClassName('menu-content')[0]; TweenLite.to(scrollbarContainer, 2, options); }); } } But when i try in my project, the ScrollTo seems to jump from the Beginning (top of the screen) sometimes and then go to the target Then if i click before one ScrollTo ends, then go to the other element correctly. Thanks in advance
  16. Hello, I'm trying to create a Draggable slide, using Timeline and ScrollTo. I want it to detect Swiper to the right it rolls to the next target, and when it rolls to the left it comes back, but when it rolls the times it passes the point and it locks. I know qye maybe this is not the best way to solve this, but within my programming level was what I got.
  17. Hello GSAPers, I need a help, I'm trying to pause each Tween inside a Timeline where I control the scrolling with ScrollToPlugin. I need it to stop, so I can control it with the Prev / Next buttons. To toggle anchors
  18. OUTDATED! These webpack issues are getting out of hand, so I made a little demo to help you get started. But first, have you considered not importing GSAP? I would suggest using a CDN instead as your app will load much faster since it's not included in the bundle and can be pulled directly from the user's browser cache. GSAP is available on both cdnjs and jsDelivr. JsDelivr is kind of unique in that you can bundle all your files up in a single HTTP request! And dependencies that are not resolved by webpack can still become dependencies of the output by using the externals option. For example, if you are using React you could do this using the unpkg CDN. <script src="https://unpkg.com/react@15.3.1/dist/react.js"></script> <script src="https://unpkg.com/react-dom@15.3.1/dist/react-dom.js"></script> And then in your webpack.config, you would configure those libraries like this... module.exports = { externals: { "react": "React", "react-dom": "ReactDOM" }, ... }; If that's not an option for you, here's the repo I made. To run it, install webpack and the dev-server first npm install webpack webpack-dev-server -g, and then npm install to install the demo. Use npm start to start the dev-server on port 8080. If you're wondering where my gsap import is, there isn't one. I made TweenMax global using the ProvidePlugin. https://github.com/OSUblake/gsap-webpack
  19. Hi all, Firstly, thank you for this wonderful tool! I'm having some issues combining the ScrollToPlugin with TimelineMax. What I'm doing is basically a bunch of animations in a TimelineMax ending with a scrollTo at the end (to move to another section). This works the first time, but scrolling back up and down again has some issues. The animations all fire properly, but the ending scrollTo doesn't work (is only fired the very first time). Is this a known bug or intended behaviour?
  20. I'm new to greensock and just completed a lynda.com tutorial. I need to add a vertical scroll to my gsap banner and the client wants to use custom graphics for the track and button. I'm assuming ScrollToPlugin is the right way to go. Although, if I can't pull off this customization I need to look for another customizable vertical scroll. Is it possible to style the scroll track with graphics?
  21. I've been using Vue.js a lot lately, and working with the webpack template. Importing GSAP after `npm install -s gsap` works correctly, but the ScrollToPlugin has some oddities. In one of my Vue components, I have this: import "gsap"; import ModifiersPlugin from "../../../node_modules/gsap/src/uncompressed/plugins/ModifiersPlugin.js"; And ModifiersPlugin works great. But when I try to do the same for ScrollToPlugin... import ScrollToPlugin from '../../../node_modules/gsap/src/uncompressed/plugins/ScrollToPlugin.js'; I get this error in Vue/Webpack ./~/gsap/src/uncompressed/plugins/ScrollToPlugin.js Module not found: Error: Cannot resolve module 'TweenLite' in /Users/shaw/Sites/green-mountain/node_modules/gsap/src/uncompressed/plugins resolve module TweenLite in /Users/shaw/Sites/green-mountain/node_modules/gsap/src/uncompressed/plugins looking for modules in /Users/shaw/Sites/green-mountain/node_modules /Users/shaw/Sites/green-mountain/node_modules/TweenLite doesn't exist (module as directory) resolve 'file' TweenLite in /Users/shaw/Sites/green-mountain/node_modules resolve file /Users/shaw/Sites/green-mountain/node_modules/TweenLite doesn't exist /Users/shaw/Sites/green-mountain/node_modules/TweenLite.js doesn't exist /Users/shaw/Sites/green-mountain/node_modules/TweenLite.vue doesn't exist looking for modules in /Users/shaw/Sites/green-mountain/node_modules /Users/shaw/Sites/green-mountain/node_modules/TweenLite doesn't exist (module as directory) resolve 'file' TweenLite in /Users/shaw/Sites/green-mountain/node_modules resolve file /Users/shaw/Sites/green-mountain/node_modules/TweenLite doesn't exist /Users/shaw/Sites/green-mountain/node_modules/TweenLite.js doesn't exist /Users/shaw/Sites/green-mountain/node_modules/TweenLite.vue doesn't exist [/Users/shaw/Sites/green-mountain/node_modules/TweenLite] [/Users/shaw/Sites/green-mountain/node_modules/TweenLite] [/Users/shaw/Sites/green-mountain/node_modules/TweenLite] [/Users/shaw/Sites/green-mountain/node_modules/TweenLite] [/Users/shaw/Sites/green-mountain/node_modules/TweenLite.js] [/Users/shaw/Sites/green-mountain/node_modules/TweenLite.js] [/Users/shaw/Sites/green-mountain/node_modules/TweenLite.vue] [/Users/shaw/Sites/green-mountain/node_modules/TweenLite.vue] @ ./~/gsap/src/uncompressed/plugins/ScrollToPlugin.js 181:2-34 Looking at ScrollToPlugin.js, it seems to be triggered by this section of code at the very end, starting at line 174, which ModifiersPlugin does not have. //export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date) (function(name) { "use strict"; var getGlobal = function() { return (_gsScope.GreenSockGlobals || _gsScope)[name]; }; if (typeof(define) === "function" && define.amd) { //AMD define(["TweenLite"], getGlobal); } else if (typeof(module) !== "undefined" && module.exports) { //node require("../TweenLite.js"); module.exports = getGlobal(); } }("ScrollToPlugin")); Looks like the `require` on line 183 is triggering the error. If I remove that block of code, the ScrollToPlugin works as expected. I haven't tested all the other plugins, but I would assume if they have that block, they will produce a similar error. Any idea what's going on?
  22. Hey guys, I'm having trouble trying to import scrollToPlugin via webpack. This is the error I'm getting - Error in ./~/gsap/src/uncompressed/plugins/ScrollToPlugin.js Module not found: 'TweenLite' I've read in other posts that you modify the webpack.config file to resolve this however I'm using create-react-app and don't have access to the config file. Does anyone know a way around this?
  23. Hi everybody, So I'm playing around the latest GSAP SrollToPlugin and trying to recreate this sample published on the site: http://codepen.io/GreenSock/pen/LkOrKY The issue I occurred is when I click on the navigation, the content will jump back to the top first then do the scroll, I found if I use the <button> instead of <li> then it works just fine. Does anyone knows what cause this issue? Thanks in advance. Here's the code: https://jsfiddle.net/cotyhsu/6rrdt6kw/3/
  24. Hi everybody, I've been successfully using GSAP for a while now and I am absolutely in love with it-as a side note I've developed a front-end UI animation pack for it which I will share with the community soon-but I'm struggling to get scrollToPlugin working. I am using the correct syntax, and I'm currently using requireJS to bring through the scripts as dependencies, with scrollToPlugin being loaded from cdnjs *after* TweenMax. Whatever I do, I keep getting the error: Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': 2 arguments required, but only 1 present. I really have no idea what could be causing it anymore. My scroll syntax is: TweenMax.to(window, 1, {scrollTo : { y: 500, x=0 }, ease: Power1.easeOut }); This is executed when a button is clicked. Wonderful community, please help me!
  25. Hi all, First off, thank you for this amazing library! It's constantly amazing. I'm using the scrollToPlugin to create an ISI. We've been asked if we can style the draggable element in the scrollbox, but we haven't been able to pinpoint where that might happen. Does anyone have any experience styling the scrollbar when using the scrollToPlugin? Thanks!
×