Jump to content
Search Community

Search the Community

Showing results for 'locomotive' in content posted in GSAP.

Didn't find what you were looking for? Try searching for:

  • 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 592 results

19
20
21
...
24
Page 20 of 24  
  1. Carl
    My video on Locomotive Scroll and GSAP has helped quite a few people get up and running My course ScrollTrigger Express addresses many common issues that come up in these forums and I've been going into responsive, scrolldriven animations as well as doing some helpful demo destructions. Although I do very comprehensive explanations of ScrollTrigger's core features, I wouldn't claim for it to be an "advanced" course. Id say 80% of the cool ScrollTrigger effects have more to do with having a solid understanding of building the effects with GSAP than controlling them with ScrollTrigger. But it seems you have a good handle of that stuff. I also tend to stay away from "performance" topics as there are so many variables that there is rarely a silver-bullet solution. FWIW ScrollTrigger internally has loads of optimizations to deliver amazing resuls. Also, I'm 100% confident that the next release of GSAP will have some very cool ScrollTrigger features that you will appreciate, but I'm not at liberty to discuss them. trust me
  2. whizzbbig
    hello, I am using codrops demo Codrops/draggable-image-strip and integrated to my project however i also using gsap.min.js for locomotive scroll, and as this demo uses tweenmax so it kindof breaks this demo, but when i comment out the cdn of gsap.min.js ( that i integrated in html ) it solves the whole issue.Anyways i went to the guide to migrate from tweenmax to gsap 3 and the things which i understand i manage to migrate and all things got work :) but only the thing wasn't worked is checkTheVideoInReadMe and this also isn't working when i haven't commented gsap.min.js, and when i comment it it works :) please help me to work this thing pullrequest or guide me i am hungry learner i ll be the student of you to learn from you and master gsap i do love animations but i am too noob to use gsap ;_; imagestrip.js
  3. awazigh
    Thanks for the prompt reply, I'll check locomotive's GH comments maybe other users experienced this as well.
  4. OSUblake
    Just my opinion, but having a scrollbar that can barely scroll is going to confuse people. Be sure to see how it looks on Windows. Like I said, that fuzzco site isn't doing native scrolling. They are using wheel and touch events to emulate scrolling. Locomotive isn't a GSAP product so we can't offer support for it. And if you're using it with ScrollTrigger, you should probably hook it up to a scrollerProxy.
  5. ilike.idontlike
    So Ive used this solution already but It doesn't work with the snapping that I'm after where the image would snap to the center of the viewport. I was hoping to find a solution in native smooth scroll sine Locomotive scroll library doesnt work with snapping for some reason.
  6. Bruno Stephen
    Hello thanks for the reply, sorry for the delay I was testing and analyzing the situation. Your alternative seems to work but not so well and I would have to make additional tweaks which can generate a lot of work. To be honest I didn't know that Gsap had its own smooth I thought it was amazing for me it would be a pleasure to use everything from Gsap. The reason I use another library is because of the documentation, because I didn't know that there was Gsap itself and a good reason is the locomotive's charming scrollbar ( is there any possibility for you to implement it?) That said at the moment I'm open to using smooth Gsap but I did some tests and it didn't work very well with snapTo: label I believe it's because of my old version 3.4.0 correct? probably enough measures have been implemented to date! Below is an example of what I need I will use this often in my projects! https://codepen.io/whoisbrux/pen/OJmBawy
  7. UncleMuscles
    https://codesandbox.io/s/youthful-pare-nnshv?file=/src/page.js So I'm learning how to have the smooth scrolling of LS and the sweet animation of GSAP but I have 3 issues. First is when I run on a seperate window the animation don't work unless I go and Inspect on Chrome. The the smooth Locomotive Scroll works but as soon as I go full window it stops. Second issue is I'm having real trouble with the start and end trigger points and how to set them. As you can see in my demo I have the markers on and while they have helped a bit I am still left stumped any good tutorials? Third is, as you can see, My code is quite verbose. How could I condense all thes useRef and gsap.to() calls? Thank youuu
  8. joaooliva
    Hey guys! I'm also trying to apply @mikel 's formula on my project but I can't seem to get it right. Here is a snippet of the code I'm currently using: gsap.registerPlugin(ScrollTrigger); gsap.set('.quote__letters-wrapper', {xPercent:-50}); var rotate = gsap.timeline({ scrollTrigger:{ trigger: "#locomotive", pin: true, scrub:0.2, start: 'top top', end:'bottom bottom', } }) .to('.quote__letters-wrapper', { rotation:360*5, duration:1, ease:'none', }) And here is the "final" result I'm achieving: https://specialistceramics-1a9f0e597ab72ec94daa.webflow.io/projects (the element to rotate is the "get a quote" circle on the bottom right corner) I don't know if you are familiar with webflow but I'm sharing the read-only link here anyways: https://preview.webflow.com/preview/specialistceramics-1a9f0e597ab72ec94daa?utm_medium=preview_link&utm_source=designer&utm_content=specialistceramics-1a9f0e597ab72ec94daa&preview=5c5cffaae41b5f44d178ce39c0942c3d&pageId=60f18c7d33ec9a317b7c5b2a&workflow=preview I would appreciate any help! Cheers,
  9. thehaes
    Thanks for replies guys. The problem is that if I use other custom scroll, I don't know how to translate the scroll position of the images to the position of meshes in webgl canvas (with the code in my example I know) and it starts to be an issue with threejs, which this forum is not about. I just thought there would be an easy way of configuring scrollerproxy with this custom scroll. I guess I'll try either with your method or locomotive and try to do it the other way
  10. ilike.idontlike
    Hahaha! I thought you'd say that. Yeah I tried your earlier suggestion with my horizontal locamotive scroll and it didn't work. I don't know why though, guess there must be a conflict like you say! I wonder if maybe it would work using scrolltrigger to horizontally scroll the whole container combined with your method snapping the sections? Alternatively I've been trying to hack together a way of using the scrollTo plug in to scroll the it to the center when it lands on one but I don't know if Locomotive scroll plays nice with this either. I'll let you know how I go
  11. akapowl
    It worked for me with what I had suggested on smaller sizes, too, before changing the width of the background - I did not check again after changing the width - sorry for that. But the solution you came up with appears to be working just great - good job! One thing I noticed, is that you are missing a closing </div> tag in your markup. That's not the culprit of the scroll breaking though. It appears just to be the markers messing with the setup - if you remove them it doesn't break anymore. https://codepen.io/akapowl/pen/c60d1bf820488fc4048dc563ca16e404 Edit: Well, it doesn't break anymore when simply just scrolling to the end. There is an issue with locomotive-scroll though (of which I thought it would be the problem here at first - and it is not related to ScrollTrigger) when resizing down after reaching the end of the horizontal scroll, that you might not be aware of, mentioned in this thread here - just wanted to let you know:
  12. jillianadriana
    Hey friends, I am working on some wavy text inspired by this effect: https://codepen.io/jillianadriana/pen/VwpOeaL I am using Locomotive Scroll for the page I'm working on, which I'm assuming is why the vanilla JS version won't work as-is, so I'm attempting to build a GSAP version. I have searched and searched and have tried to piece together a solution but obviously it isn't working the way I'd like. I spent most of my weekend on this and I have decided to just come ask for help directly. I have used snippets of code pulled from various threads here and I've watched most of Carl's videos in Creative Coding Club, but I do have learning disabilities, so things just don't stick in my brain as well as I wish they would. That's why I tend to learn by doing, and I end up having to do things over and over and over before I finally get the hang of it. I say all of that to explain that I am not looking for shortcuts or someone to do the work for me. I am trying my best J
  13. OSUblake
    Locomotive scroll is a third party library, so we can't really offer support for it. There's an example in the docs that doesn't use another libary. https://codepen.io/GreenSock/pen/gOgWELo SVG text on path GSAP animation (codepen.io)
  14. jillianadriana
    Thanks, Blake. I was able to recreate your pen and it all makes sense to me, however I can't get it to work with Locomotive Scroll... https://codepen.io/jillianadriana/pen/eYvXXYy
  15. Oluwatobiju Judah
    @OSUblake & @akapowl thanks for all the help so far. I removed locomotive scroll and implemented the horizontal and smooth scrolling with scrolltrigger as you suggested and they worked great. Well, except for the trigger on the element. Which seems stay at the point where the object is on load but doesn't follow the object on scroll, and additionally, weirdly goes upwards as I scroll. See codepen here https://codepen.io/tobijudah/pen/YzZMepa/
  16. column5media
    Thank you for the informative reply. It is very unfortunate that these two libraries cannot play nicely together, but I understand the limitation. I believe I'm going to spend some time hacking away at Locomotive to see whether I can resolve the issue by preventing some of its (perhaps unnecessary) transform resets when objects aren't in view. Hopefully the performance impacts aren't decisively negative. I'll report back if I have any success.
  17. column5media
    Hi Blake, This is a great demo and would be a lovely replacement for Locomotive, but I noticed I was able to consistently break it on resize, similar to the issue I am having in my thread here. I haven't done a proper investigation as to whether or not they are truly related issues (i.e. ScrollTrigger not being able to detect whether it's in a triggered section and .refresh() only affecting those sections that are in view), but it seemed worth notifying someone about. Let me know if you need me to screen record how I go about breaking it, but the instructions I provide in the linked thread seem to work pretty reliably for me.
  18. OneManLaptop
    Wow, I mean that is what it looks like? A ScrollTrigger native version of the smooth scrolling in locomotive scroll? That's fantastic if so, one less library to have to worry about in the future. The strongest of hat tips to the developer. Edit: Haha, yup, just seen the title of the CodePen and that's a pretty big clue. ? Brilliant.
  19. Amir-A-M
    Thanks but it still doesn't work for me. By checking the file below locomotive-scroll / blob / master / docs / index.html I noticed the data-scroll attribute. By adding it. It works well
  20. akapowl
    Hello @Oluwatobiju Judah There really is awhole lot going on in your example but from a quick glimpse into your SectionThree.tsx, it looks though like you are using locomotive-scroll's data-scroll-section attribute, right? Maybe they are the culprit causing your problems. There was a question about those earlier today - unfortunately ScrollTrigger won't work with them.
  21. akapowl
    All I was saying is that if you set a margin of -2px to the sections, the jittery line in between the sections might still be visible if the user changed the zoom of the browser to something very low e.g. - I can still notice it at 33% - it is probably not a big issue though since I don't think there will be many people viewing it at this low zoom levels. I only just wanted to make you aware of that in case that was something that would bother you. GSAP does do an awesome job in taking care of many quirks all across the board, especially when it comes to cross-browser compatibility and reliability - but as mentioned that issue is not related to GSAP but locomotive-scroll.
  22. proof-of-sock
    dayym: https://github.com/locomotivemtl/locomotive-scroll/issues/97 it's a rounding error thing? or maybe it's not the same issue, the video is gone from the example. The quote from the site "It happens because of half-pixel computation by browser of the translate value applied to the sections. I find out better results with value rounded to 2 decimals instead of 3. Even better if only one, or none, but I can't tell if the translation is as smooth as it should then."
  23. Cassie
    That looks like maybe locomotive scroll for the fluidness, maybe some webGL on the images, masking, cursor tracking and hover events as well as dragging and snapping. There's a *lot* going on in that slider, I'm afraid it's a little beyond the abilities of the forums to put together in a demo. What you have is a good start though. Is there a particular bit you're trying to mimic?
  24. Pablitooten
    Thank you for your wise words Jack. Locomotive scroll makes possible a smooth scroll which together with gsap animations, makes possible a smooth animation. I wish you guys had a smooth scroll library, so I don't need to bring third parties. I know gsap is very trustworthy. I did it following a video tutorial i found in youtube: https://www.youtube.com/watch?v=JnLn8Rq4p_I&t=552s It is very difficult to work live in the server deleting things until error are gone and building again back as you told me. I can't expect an immediate result when you try in a navigator, for example, my hosting is hostinger, if i take a radical step and delete a file called main2.js which contains all the gsap animations and i go to test in chrome for example, the animations are still executing, even when no main2.js is in the server and after deleting all navigator history data..... Looks like difficult to work live with the server, maybe changes in the server takes 30 minutes to take place... Thank you Jack.
  25. akapowl
    Hey @Danish Shah Maybe you linked to the wrong pen? The pen you posted does have a footer in the markup but neither does it have any CSS for that, nor any JS. There is a different thread where I posted a couple of examples on how to do a parallax footer effect like that - with native scroll, smooth-scrollbar and locomotive-scroll. Check it out and see if that helps you maybe. Edit: I see you just updated the pen. There still is an extra browser-scrollbar and it looks like you didn't include the neccessary CSS for the body and scroller for smooth-scrollbar to work / display properly. If you want to continue using smooth-scrollbar, I highly recommend digging into how it works and what you have to consider for setting it up properly, or you will run into more and more problems further down the road. Here are some helpful links: General info on smooth-scrollbar Some more info and some documentation Detailed API documentation
19
20
21
...
24
Page 20 of 24  
×
×
  • Create New...