Jump to content
Search Community

Shaun Gorneau last won the day on September 8 2021

Shaun Gorneau had the most liked content!

Shaun Gorneau

Moderators
  • Posts

    837
  • Joined

  • Last visited

  • Days Won

    23

Everything posted by Shaun Gorneau

  1. The best way is to learn the fundamentals and then start with small projects; projects with one goal. More complex projects are really many small projects that work in concert. You can sign up for e-classes or even learn from YouTube videos.
  2. It's Javascript errors. Reducing your Javascript code to the basics for this shows that your code above works just fine. https://codepen.io/sgorneau/pen/WNOrMKE
  3. A few quick things. 1. There are errors all throughout the HTML (within the SVG markup), CSS, and Javascript. 2. There is far too much going on to truly get a grasp of what you are trying to do and, furthermore, help you achieve that. Simplify the problem down to the basics and we can help you from there. That doesn't mean you won't get answers to the more complex workings, it will just help us to provide answers that you can build on. Shaun
  4. There's a few ways you can do it ... If part of a timeline, give that tween a longer duration. You could also affect the timescale ... but, without more information, I think a longer duration would be a better fit. Another option is to define an end value that is over a large pixel (or a calculated) value.
  5. Hi @Alexander S., One way you can achieve this is to move from a tween to a timeline and allow scrollTrigger to control the timeline. Then, you can tack on an empty tween with a relative position to achieve the "pause" ... which is really just a tween affecting/doing nothing for a specified amount of time. https://codepen.io/sgorneau/pen/KKWNvaL?editors=0010 Hope this helps! Shaun
  6. Hi @ZORGOBORGO You can accomplish this with GSAP alone (which I would recommend) by pulling that tween out of the timeline and making a call to a separate tween at that point of the timeline (with a conditional check to see if it's already been called). https://codepen.io/sgorneau/pen/wvJovBd?editors=0010
  7. Hi @Liam W, You can add a delay value to the first tween. https://codepen.io/sgorneau/pen/bGqwzXW?editors=0010
  8. Hi @cottoncreative, As I don't see anything related to a progress bar in your markup, I'm going to ignore that for now (I can help with that if it is an issue). Also, I'm going to show you how to hook up scrollTrigger to a timeline and how you can make use of "pin" to pull off what I think you're looking for. (as you stated, reviewing in a larger CodePen window is ideal) https://codepen.io/sgorneau/pen/GRWZXRP Hope this helps! Shaun
  9. What about it seems off? Is the interaction not functioning? Or do you think the implementation feels "off"?
  10. Not edgy at all, just progressive enhancement.
  11. I would mark it up as a link and then use Javascript to change the markup to a <div>. That way if JS is not available, due to error or being disabled, your link is intact.
  12. @Jim Nayzium, A tween is just that, a single tween of one or more properties on a matched element or elements. A single element https://codepen.io/sgorneau/pen/wvJKVwK Multiple matched elements https://codepen.io/sgorneau/pen/GRWpVKV A timeline contains one or more tweens that have timing controls to dictate when they begin and end on the timeline. The can begin relative to the timeline (at absolute positions .. like 0, 5, 20) , relative to each other ("+=3", "-=2",), or at named labels ("someLable"). You would use a timeline where sequencing is necessary. A simple timeline https://codepen.io/sgorneau/pen/eYvpqYG A more complex timeline https://codepen.io/sgorneau/pen/gOmaVpO?editors=0010 As far as variables go, with regard to both a tween and a timeline, a variable is used to reference that tween or timeline in the future. It's that simple. Neither require a variable, but it can make life easier to store them in variables at times, especially timelines. With the "more complex" timeline above, things are good ... until I need to dynamically add to the timeline or manipulate in some way later (pause, reverse, etc.). There is no reference to it. Once I'm stop chaining methods .. it's done. But, if I hold it in a variable to reference, I can do a lot with it. I can add tweens to it based on future logic, I can reverse it. I can jump to a specific timestamp or label. https://codepen.io/sgorneau/pen/jOBbgqB
  13. ScrollMagic is not a product of nor supported by Greensock. It's developed and supported by a 3rd party.
  14. Hi @qqignatqq, I'm saying the exact opposite. onUpdate is not necessary to include ... you're never required to define an event callback. This will not break anything in the future.
  15. Hi @qqignatqq, The reason this is happening is because you're forcing ScrollTrigger to recalculate on each onRefresh because the tween is killed. You can just omit the onUpdate call. https://codepen.io/sgorneau/pen/LYxwamG Hope this helps, Shaun
  16. With WordPress (and Drupal and pretty much any CMS) there are a number of ways you can include JS on specific pages You can choose to preprocess on any conditions and load JS files You can use PHP logic in a template file to determine when to load a JS file You can include the <script> call on the page itself, but that could be troublesome from a CMS standpoint Unfortunately, it's easier to call script and css files at the config level of the theme and put the logic within the script.
  17. Hi @brandpirate, One thing to note is those are not errors, those are console warnings. It's perfectly fine to receive them. But, it's better not to. There are quite a few ways to go about this ... ultimately what you want to do is not run your GSAP code on pages where it's not called for. Seeing as this is WordPress, I assume jQuery is loaded. You can simply check to see if an element is on the page first if( $('#home-headline-h1').length ){ gsap.from('#home-headline-h1, #home-headline-short', {delay: 0, duration: 2, opacity: 0, x: -50}); } Hope this helps. Shaun
  18. Hi @scavaliere, A few changes would help you along here. The first thing is that within your function handling the click event, you're creating tweens that are disconnected from the timeline. So they have no affect on the scroll position which in turn ties into the scrollTrigger. Using the scrollTo plugin and tweeting the scroll position should accomplish what you're looking for. As a note, I've added a label to your timeline in an effort to use scrollTo and grabbing a pixel value of the label position ... but I have not figured that out yet. In this instance, I simply put a pixel value of 250. It would be much better if this value was calculated as it would be more flexible. If/when I figure that out, I'll be sure to update you. https://codepen.io/sgorneau/pen/abpxbbB?editors=0010 Hope this helps. Shaun
  19. I'm curious about what you're defining as "go slower". Do you want the tweens to happen once the ScrollTrigger start point has been met, but the tweens themselves to be independent of any scroll action? Or do you want to "take over scrolling" in such a way that no matter the user's scroll velocity, you're putting a maximum velocity in place?
  20. You're welcome! Happy to help.
×
×
  • Create New...