Jump to content
Search Community

Search the Community

Showing results for tags 'scrolltoplugin'.

  • 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

  1. Hello, I did what I wanted to do, at least partially, but I could not make it work as I wanted. When I scroll to the next section, I cannot change the number, but I could not go back to the previous section and did not change the numbers in the buttons. Can you help me?
  2. I have a component with dynamic id usinguseId()hook from react. it generates a string that contains a colon ":R1fakq:" something similar to this. then I will use this id to trigger a scrollTo with ScrollToPlugin but it throws an uncaught error. I tried manually setting the id with a colon character and it render the same issue.
  3. Sukru

    Gsap Section Anchor

    Hello, in a project I am working on, I want to make the menu go to different places on the page, I created codes for this, but when I go to the point I want to go with "anchor", I also wanted to know where I was in the menu I fixed. However, I think it assumes the points that I didn't add #anchor and it seems as if the hug is surprised. When I click on an item, a very unrelated item "active" class is added. Can you help with the codepen link i created?
  4. Sukru

    Gsap Sticky Menu

    Hello, I have 3 or more content and at a certain point I can make a sticky menu, but how do I make these links slide to the linked id content and I need to add an active class to the active ul li a. And when it comes to sticky menu footer, I want to hide my sitcky menu, like fadeout, when I go up from the footer again, I want to bring the menu back. Can you assist?
  5. Hi all, I would like to get help with an issue I'm facing. I've made an animation which start scaling after reach at the top of the window. But, I would like to start the scaling when it shows on the viewport. I mean it will scroll slowly and when the section reaches at the top, the animation will be complete. I've searched on the forum and found this can be done with the ScrollToPlugin. As a beginner I'm not sure how I can apply it on my code. Any help would be appreciated.
  6. I'm coming to this having started from that support question. Many years ago I'd built a site based on this very old tutorial. Then, a few months ago I got some assistance on this in order to create a simple horizontal scroll, which worked pretty nicely. Today I've started to try and combine the scripts from support question responses, and the horizontal scroll pen, in the one I've included here (somehow I don't think that sentence makes any sense except in my own head) in order to emulate the behavior from that old tutorial. In any case, I'm not sure why it's not really working the way I think it should. I'm still fairly new to gsap, so I apologize in advance for not seeing things that should probably be obvious.
  7. I forked one of the scrollto plugin's codepen from the docs, I have the exact same setup with few navigation buttons and I used scrollToPlugin to smoothly scroll to the clicked section. I also have an indicator to show which section I'm in and when the users scroll, the indicator accurately shows where the users is in the navigation buttons, I used scrollTrigger to do that but I couldn't make it work in the codepen so I commented out the registerPluin(ScrollTrigger) line but the scrollTrigger code below shows how it should be working. This makes everything jittery as when scrollToPlugin is scrolling to the specific section, scrollTrigger also triggers its own animation. Is there any way to skip scrollTrigger's animation while scrollToPlugin's animation is playing?
  8. I'm creating a project where i need smooth scrolling as well as scroll-to function. In my codepen I've used smooth-scrollbar library coexisting with scrolltrigger's scrollerproxy() library... which works fine. But due to the scrolljaking the scrolltoplugin is not working properly. I've tried scrolltoplugin without smooth scrolling it works but I need both to work together. Is there any way to make them work together? Thanks in advance!
  9. Hello, While I was testing this example in my own website with different browser, I noticed that it scrolls very smooth in Firefox (like the example in the codepen) but in Edge and Chrome no matter what ease I choose or how long the duration is, scroll is not smooth, I see that #Section suddenly jump under navigation bar and this is very annoying. Do you know how can I solve this? Thanks
  10. Hello guys, I can't quite figure out what's wrong with my tween, and was wondering if anyone here could help me out. The scroll animation is working as indented, but the problem is with the buttons. I'm seeing a small jump after clicking on it, most noticeable by a white flash at the bottom. Thanks in advance, Lucas
  11. Hey guys, I am trying to tell a story which can be achieved through simple slides and carousels, but I want to add some life to it. I came across a page that does exactly what I am trying to do - https://www.prevint.pt/. Fell in love with this implementation. From the source I can see that it has a wide <ul> with 100vw <li> sections and on scroll the <ul> is translated left ( amount = width of section ). Seemed life a fairly straightforward situation and I am sure that this page is using GSAP. But I am unable to figure out few things: Should I use any third party scroll library along with GSAP to do horizontal scroll ( as in the reference site there are no scroll bars ). Animate the<ul> to translate left on first mouse-wheel event and ignore subsequent mouse-wheel events until animation/transition is complete. Controlling/Scrubbing the slides with the custom navigation at the bottom( but that's secondary concern here). I have tried different approaches but none of them could do this. The attached codepen is the basic one with snapping sections but they don't snap immediately ?. Can someone please point me in the right direction. UPDATE: Attached codepen with the solution.
  12. Hi guys, my first post here ^_^, I tried to animate on `x` axes and it works ok but I want to make this animation better. I am quite lost because to achieve such thing I need many marker "start&end". https://codesandbox.io/s/nextjs-global-css-migration-forked-6psms?file=/pages/index.js:138-200 I know that my markers are messed up but I want to achieve 2 things: 1. At the moment my animation works only 1 way "when scrolling from top to bottom" - I want the animation to happen in both ways... how is possible to tell "end" to become "start"? 2. `left-col`, `middle-col`, `right-col` are under 1 `section` and when the animation `start` hits the `section` the third/last `right-col` could finish till it gets there. - I would prefer the animation to `start` when the view port hits `right-col` not `section` (`snap: 1 / 2,`) works but sometime is quite slow and animation and `snap` is not in sync. looks like something is missing. I don't think my GSAP code is clean, feel free to delete/simplify things if required Any guidance/support will be much appreciated!
  13. In this demo I’m trying to create a navigation that scrolls horizontally to show more navigation items as the user scrolls down the page, the navigation allows the user to manually scroll horizontally and click on different nav items and will scroll to that section of the page. The issue comes when the user manually scroll horizontally, then click on a nav item, the navigation jumps. How can i control this part of the animation to create a smooth transition after the user scrolls the navigation horizontally?
  14. It's a copy of one of your community examples. However I've tried to add a ScrollTo functionality. In development both of the implementations work, when I comment one of them out and if I have both of them ScrollTrigger takes precedent and the sections cannot be navigated through click. So what could be causing that and what should I do to fix it. https://codesandbox.io/s/summer-fog-1olq6 Codesandbox is being difficult and doesn't even run the ScrollTo function.
  15. 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
  16. 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?
  17. 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
  18. 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?
  19. 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!
  20. 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.
  21. 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.
  22. 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 !
  23. 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.
  24. 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!
  25. 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?
×
×
  • Create New...