Jump to content
GreenSock

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

utopian last won the day on January 1

utopian had the most liked content!

utopian

BusinessGreen
  • Posts

    7
  • Joined

  • Last visited

  • Days Won

    1

utopian last won the day on January 1

utopian had the most liked content!

About utopian

  1. I don't know if you noticed but if you scroll before the first animation is finished, it takes the current CSS styles and applies them as to original styles to use with the scrolltrigger, so if you scroll before it's opacity: 1, then that is the value which is used when you scroll all the way back up. Do you recommend stopping users from scrolling until the first animation is finished and then letting people scroll afterwards in order to have the values all set? I was testing using fromTo on the scrolltrigger but that wasn't working. Let me know your recommendations please. Thanks!
  2. Thank you Caissie! I will see if adding lazy: false fixes it for me. So glad to have access to such amazing support with you guys. Have a great weekend!
  3. I did notice that if I add immediateRender:false it fixes it. I am not sure why though. If someone could explain and also confirm that that's the correct way to proceed with this. Thanks!
  4. Hi there, I've got a weird issue that is probably because I'm doing something wrong and was hoping someone could help point me in the right direction. I've used an array to create a gsap.from() with scrolltrigger on the element of the array so that when you reach the section it will fade it in using the gsap.from(). However this only works if I load the codepen directly in the screen by clicking "run" otherwise if I just reload the page it doesn't do anything. I noticed this behaviour while working on a client project where if I opened the page in a new tab it wouldn't load the animations on scroll. I added an onComplete to see if it's working on it does log the section as it's being scrolled through however the animation itself just doesn't function. If I put a gsap.to in the onComplete it works, but that seems wrong. I've made a small video to help you see what I'm showing in the codepen: https://www.loom.com/share/be4e15ce7d454e54b9291df1b4e6dc20. Please let me know if you have questions and if you can help. Thank you!!
  5. Thank you for the excellent support! I see the mistake. I did not realize that with the timeline, I could have the effects happen back to back and have one ScrollTrigger to control them both (because the animations are back to back). I've figured it out and it looks great. Thanks again!
  6. First off, if you are working on WordPress and editing themes. You should always create a child theme to make customizations on. It's bad practice to customize your parent theme (or just theme) because if the author of the theme updates their theme and you update it, you will lose all your customizations. If you make customizations on a child theme, you will then be able to safely update the parent theme without losing all your work. Now to help you enqueue. Your code should look like this: function wpb_adding_scripts(){ wp_register_script( 'gsap', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js', array(), '1.0', true ); wp_register_script( 'gsap-settings', get_stylesheet_directory_uri() .'/gsap-options.js', array('gsap'), '1.0', true ); wp_enqueue_script('gsap'); // This is probably not needed since below we are enqueueing the gsap-settings file with has a dependency on the gsap script, so it should enqueue both wp_enqueue_script('gsap-settings'); } add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); This would then enqueue the script properly I believe (haven't tested it but pretty sure it should stop the error). I also added a gsap-settings script, which you can create that js file in your theme at the correct location and write all your animation in there and call gsap. Hopefully this helps!
  7. Hi there! I have prepared a codepen that will hopefully help find the solution to my problem. I am using both ScrollTrigger and SplitText to try to animate some text. My goal is to do the following: 1. Have the first h1 animate into the page when the page loads. 2. Once the user scrolls down a bit, the h1 will animate out and the h2 will then animate into the page. This "works". The issue is once you scroll back up. When you scroll back up the h2 will animate out and the h1 will animate back in, however the h1's first character will not be visible. I noticed that if I comment out the first part of my timeline (the from()), it then works perfectly, however I can't seem to get it to work if I animate the h1 when the page loads. Here's another codepen showing what I just mentioned above (commenting from()): https://codepen.io/julienkos/pen/MWEVvQE. Please let me know if you can help! I appreciate it.
×