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 12/03/2021 in all areas

  1. I'd probably do something like this: https://codepen.io/PointC/pen/af1db50f7d61d2ed491b684a885d4308 Happy tweening
    3 points
  2. You just need to create a ScrollTrigger without a trigger. 😉 A Pen by GreenSock (codepen.io)
    3 points
  3. Welcome to the forums @Patrick R Unfortunately, convertToPath will not work on text. About the only JS library that would even be able to handle that would be opentype.js. It would be much better to just convert your text to a path with an SVG editor.
    3 points
  4. How about this? ScrollTrigger Color Change Issue (codepen.io)
    3 points
  5. Nah. And a timeline .to is just this under the hood, so it would be creating the same amount of instances as stand alone tweens. gsap.timeline() .add(gsap.to(".foo", { x: 100 })) .add(gsap.to(".foo", { y: 100 })) So I'm not exactly sure what you're trying to do here, but I would not animate an element you are pinning. Instead, I would put your boxes inside the pinned element. When you want them to go back to their start just animate their x and y back to 0. I didn't mess with your parallax code or the red box so ignore that part. A Pen by GreenSock (codepen.io)
    3 points
  6. We have some stuff in the blog and learning center. For something more in depth, @Carl has some excellent courses over at his Creative Coding Club. And then @PointC has some really nice tutorials at MotionTricks.
    2 points
  7. Welcome to the forums @kfconeone This was just fixed...
    2 points
  8. I'm not sure if this is wanted or useful for anyone else, but with ScrollTrigger being the hot topic I felt the need to create a graphical hint for users sometimes to advise the to scroll I did the thing in pure css highly configurable and it shows an animate touch hand or mouse-wheel according to device. If you put the html somewhere at the end of you document and load the css ist show for a short time and that's it. I just thought that I would share it if someone has use for it. Feel free to use it, hate it or delete the post. https://codepen.io/mdrei/pen/rNGOWNw
    1 point
  9. I guess what @PointC means is that you loop over you paragraphs at some point (document ready seems a good choice) and create an array of Timelines one for each paragraph. (don't forget to initially pause them) You can randomly call one of the timelines on mouseover, play, pause and stop it as you like. Sounds like god advice to me - like always from PointC
    1 point
  10. Hello @PatrickRoppel https://codepen.io/akapowl My codepen profile shows examples for applying faked horizontal-scroll as such to multiple multiple sections - also in different versions with different smooth-scrolling libraries. This here is a version with locomotive scroll - maybe it'll help. https://codepen.io/akapowl/pen/wvJroYy
    1 point
  11. Welcome to the forums @Davidstr If you want to toggle an animation by hovering, it's usually best to create your animation outside of the listener, kind of like this. Hover toggle (codepen.io)
    1 point
  12. Thanks, I used onReverseComplete and actually came across that thread just before you sent it, and I used the onUpdate combined with the method to track the direction, and it works! Thank you.
    1 point
  13. What should I say? Thank you both, that's exactly what I was looking for! Nice explanation by the way.
    1 point
  14. Welcome to the forums @AlbertWalicki What's a common problem? A common mistake for ScrollTrigger is to create ScrollTriggers on tweens, like you have in your demo. A ScrollTrigger should either be in a standalone tween or a inside the timeline constructor. // bad gsap.timeline() .to(".foo", { scrollTrigger: { ... } }) // good gsap.to(".foo", { scrollTrigger: { ... } }) // good gsap.timeline({ scrollTrigger: { ... } }) .to(".foo", { ... }) Why don't you rework that and then we can tackle your mouse movement issue.
    1 point
  15. Hi @Muaaz.M, You could add pinspacing:false to everything but the last panel. https://codepen.io/GreenSock/pen/OJxVgpO?editors=1011 Hope this helps! ✨
    1 point
  16. Hi Rajan, You can animate the progress of a tween or timeline like so - https://codepen.io/GreenSock/pen/XWebgmQ?editors=0010 Hope this helps! ✨
    1 point
  17. Maybe one of these threads can help - one contains an example for scrubbing background-color changes and one for triggering timebased background-color changes - in both there is locomotive scroll included.
    1 point
  18. Hi there CreativeRobot, You you don't seem to have the right markup for the code you're trying to run. You're looking for .section-background and .page-section and a bunch of attributes that don't exist. I think you're using jQuery too and that's not loaded. I'm afraid it's pretty hard for us to help you without a working demo. Aside from that - yes it would be possible to add locomotive scroll, anything is possible with enough custom code and time! However I'm afraid that we can't help with that in these forums as it's not a GSAP tool. Carl from snorkl.tv has covered this implementation though so maybe this link will help - good luck! https://www.snorkl.tv/scrolltrigger-smooth-scroll/
    1 point
  19. You need a way to trigger it right BEFORE it hits the very very end (and beginning). It won't consistently trigger the onLeave if it's literally right up against the very end of the page. I'd give it 1px on top and bottom by just using a different ScrollTrigger that's solely for the looping: https://codepen.io/GreenSock/pen/YzrXPYO?editors=0010
    1 point
  20. Hi @pietM I could only get your demo to go up in Safari, but it looked the same to me in both directions. Unless I'm missing something, I didn't see the repeated panel show up. Is anyone else having trouble getting his demo loop going up? That said, I had to make a slight adjustment to get it to work in other browsers. I'm not exactly sure what that is necessary as your code appears pretty much the same as the one posted by Jack. 🤷‍♂️ Horizontal Loop (codepen.io)
    1 point
  21. Hi, I just bumped into this 😀 @GreenSock @ChristosTsangaris Thanks for sharing, I appreciate it. I see that many people have the same problem with importing Gsap into Nuxt. It's actually very easy. I will share a few tips. There are two (most common) ways to import Gsap into Nuxt: 1. Global import Create Nuxt plugin and import Gsap // ~/plugins/gsap.js import { gsap } from 'gsap' // Inject gsap's core for global use export default (context, inject) => { inject('gsap', gsap) } Enable it in nuxt.config.js // nuxt.config.js export default { plugins: ['~/plugins/gsap.js'], } Access GSAP globally by using this.$gsap <!-- index.vue --> <template> <div> <h1>NUXT GSAP</h1> </div> </template> <script> export default { mounted() { this.rotation() }, methods: { rotation() { // Access GSAP by using 'this.$gsap' this.$gsap.to('h1', { rotation: 27, x: 100, duration: 1 }) }, }, } </script> 2. Local import (import it in every file where you use it) Let's say you want to use it in 'About' page: <!-- about.vue --> <template> <div> <h1>NUXT GSAP</h1> </div> </template> <script> import { gsap } from 'gsap' export default { mounted() { this.rotation() }, methods: { rotation() { gsap.to('h1', { rotation: 27, x: 100, duration: 1 }) }, }, } </script> But you also want to use it later in the 'Contact' page. All you need to do is repeat the import process: <!-- contact.vue --> <template> <div class="content"> <div class="box"></div> </div> </template> <script> import { gsap } from 'gsap' /** * Gsap plugins * * Use 'process.client' to avoid 'Window is not defined' errors * This is due to the 'server-side' rendering. */ if (process.client) { const { ScrollTrigger } = require('gsap/ScrollTrigger') gsap.registerPlugin(ScrollTrigger) } export default { mounted() { this.animateOnScroll() }, methods: { animateOnScroll() { gsap.to('.box', { x: 500, ease: 'Power1.easeInOut', scrollTrigger: { trigger: '.content', pin: true, end: 'bottom', scrub: true, }, }) }, }, } </script> <style> .content { width: 100vw; min-height: 200vh; } .box { width: 100px; height: 100px; background-color: #00c58e; } </style> Another option to consider is Nuxt Gsap Module If you don't want to bother with these steps (manual instalation and import), simply install nuxt-gsap-module and you are ready to go. I developed this module to simplify installation process. When you install and enable the module, it will automatically inject the GSAP's core into the nuxt context and you can use GSAP globally trought the app. No need to manually import GSAP into additional plugins (clean workflow). This is very useful because someone unfamiliar with Nuxt (SSR) may have trouble integrating GSAP into the nuxt plugins (a common problem with "Window is not defined, etc."). Also, the module allows you to add additional GSAP add-ons such as ScrollTrigger etc. with a few line of code (true or false) inside main nuxt.config.js file. Pros: - Helps you integrate GSAP javascript animation library - Allows you to easily animate elements via custom v-gsap directive - Provides a solution for global use via this.$gsap - Zero-config setup ready to go Cons: - Unfortunately, it doesn't support GSAP Club plugins (at the moment) Sorry for long post 😀 and I hope this helps someone.
    1 point
  22. Feature lists are nice, but they can get lengthy and they don't always tell the story in a way that's relevant to you as the developer/designer in the trenches, trying to get real work done for real clients. You hear plenty about theoretical benefits of CSS animations or some whiz-bang library that claims to solve various challenges, but then you discover things fall apart in all but the most modern browsers or the API is exceedingly cumbersome or there are frustrating "gotchas". You need things to just work. .expander { cursor: pointer; font-weight: 400; position: relative; } section .card{ padding-bottom: 6px; margin-bottom: 10px; padding-left: 35px; padding-top: 6px; box-shadow: none; } .expandable-list { padding-left: 0; } .expandable-content { padding: 0; height: 0; overflow: hidden; } .expander-button { position: absolute; border-radius: 50%; background-color: #BBB; width: 15px; height: 15px; display: inline-block; vertical-align: middle; border: 1px solid #FFF; margin-top: 8px; /* vertically center with heading top: 50%; margin-top: -9px; */ left: -8px; margin-left: -18px; font-size: 0px; } .expander-plus, .expander-minus { position: absolute; background-color: #FFF; display: block; } .expander-plus { width: 1px; height: 7px; left: 6px; top: 3px; } .expander-minus { width: 7px; height: 1px; top: 6px; left: 3px; } .project-post p { font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; } .project-post h2 { padding-top: 16px; margin-bottom: 10px; } .expPoint, .project-post .expList li { font-size: 1.1em; list-style: none; line-height: normal; margin: 0px 0px 0px 8px; padding: 6px 4px 4px 20px; position:relative; border: 1px solid rgba(204,204,204,0); } .expPoint, .expContent { font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; } .expPoint:hover, .project-post .expList li:hover { background-color:white; border: 1px solid rgb(216,216,216); } .expContent { height: 0px; overflow: hidden; color: #656565; font-size: 0.9em; line-height: 150%; font-weight: normal; margin: 5px 0px 0px 0px; padding-top: 0px; } .toggle { width:6px; height:8px; position:absolute; background-image:url(/_img/toggle_arrow.gif); background-repeat: no-repeat; left: 9px; top: 12px; } .expMore { color: #71b200; text-decoration: underline; font-size:0.8em; } #featureAnimation, #featureBox { background-color:#000; border: 1px solid #333; height: 220px; overflow:hidden; line-height: normal; font-size: 80%; } #featureAnimation { position:relative; visibility:hidden; } #featureBox { position:absolute; } #featureAnimation, #featureBox, #whyGSAP, .featureTextGreen, .featureTextWhite { width: 838px; } #whyGSAP, .featureTextGreen, .featureTextWhite { text-align: center; } #whyGSAP, .featureTextGreen, .featureTextWhite { font-size:50px; position:absolute; font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; top:0; } .featureTextGreen { color:#91e600; font-weight: bold; } .featureTextWhite { color:white; font-weight:normal; } .star { position: absolute; width: 16px; height: 16px; display: none; } #browserIcons { top:64px; left: 100px; width: 92px; height: 92px; position: absolute; text-align:left; } #browserIcons img { position:absolute; } .featureTextMinor { color:#CCCCCC; font-weight:normal; font-size:20px; position:absolute; font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; visibility:hidden; } .dot { position:absolute; background-color: #91e600; } #ctrl_slider { position:absolute; width: 725px; height:10px; left:18px; top:196px; background: rgba(80,80,80,0.3); border:1px solid rgba(102,102,102,0.5); visibility:hidden; } Why GSAP? Performance Compatibility Other tools fall down in older browsers, but GSAP is remarkably compatible. Scale, rotate & move independently (impossible with CSS animations/transitions) XNJYHQLJYQEW CSS, canvas libraries, colors, beziers, etc. Total control pause(), play(), reverse(), or timeScale() any tween or sequence. GSAP The standard for HTML5 animation replay
    1 point
  23. Yep, Carl is right but I also wanted to point out that you can tween the zIndex if you want (not that you need to).
    1 point
×