Jump to content
Search Community

harp30

Members

  • Posts

    33

  • Joined

  • Last visited

 Content Type 

Posts posted by harp30

    Video error with gsap

    in GSAP

    Posted

    Okay thank you.

    Changed the code to this:

    but getting this error:
    Loading.js:27 Uncaught (in promise) DOMException
     

    import TweenLite from "gsap";
    import TweenLite from "gsap";
     
    class Loading{
    constructor(){
    this.smokeVideo = document.querySelector("#js-loading-video");
    this.smokeVideo.addEventListener("ended", () => this.removeLoadingSection()); // ERROR HERE NOW
     
    this.AnimationEffects();
     
    }
     
    textAnimation(){
    let textContent = document.querySelector("#js-loading-text-content");
    TweenLite.to(textContent, 0.7, {
    opacity: 0,
    delay: 2.5,
    onComplete: () => this.playVideo()
    });
    }
     
    AnimationEffects(){
    this.textAnimation();
    }
     
    playVideo(){
     
    this.smokeVideo.play();
    this.smokeVideo.playbackRate = 1.5;
    }
     
    removeLoadingSection(){
    TweenLite.set(document.querySelector("#js-loading"), {display: "none"});
    }
     
    }
     
    export default Loading;

    Counter - animation not following timeline

    in GSAP

    Posted

    Yes I’m also beyond confused. I think I need to take a proper GSAP course. I love it but I always make it complicated than it is.

     

    the effect I was trying to create was this one:

    https://kalpa.parmigiani.com/en/

     

    but my effect disappears right when the counter starts. I was following a gsap counter demo on code pen.io.

     

    Im not sure how to fix it. Is there any course or ebook that can help me write proper gsap code?

    Where to learn beyond the basics for gsap?

    in GSAP

    Posted

    Thank you everyone for your detailed guidance.

     

    Okay so for each page of animations, example: loading page, landing page, and etc. Each set of animations should have their own timeline objects? 

     

    And I’ll start studying he topics for complex animations! Thank you all!

     

     

    Where to learn beyond the basics for gsap?

    in GSAP

    Posted

    Hello thank you!

     

    im going to copy websites to learn, that’s a great idea.

     

    ill build websites I see in gsap’s example page,

    i will start with this one:

    https://www.igoodi.eu/vision

     

    i wanted to know if there’s a tutorial to help me get started with the scroll up effect? Is this a slider? And on scroll the slide changes? If so how to implement the mousewheel and how to set up the HTML/css?

     

    thank you! Excited to show you what I come up with.

    Where to learn beyond the basics for gsap?

    in GSAP

    Posted

    There are many great sites made by gsap on this website.

     

    i want to learn how to create such amazing experiences as well, I’m good with the basics but how to reach the next step with gsap animations? Where/how to learn more compelling animations?

     

    Thank you.

    What is the best practice

    in GSAP

    Posted

    Hello,

     

    Had a general question when it comes to best practice.

     

    example: say we have an animation we want to fade in - or any animation for that matter.

     

    Options:

    1. do we perform the settings via css file and then animate in JS with GSAP timeline(s)

    2. Perform settings in JS via GSAP and then animate via timeline(s)

    3. Don’t do any settings and just perform GSAP timeline with from method?

     

    to save memory and have best performance, which is the best option?

     

    thank you.

    loop back to beginning on a slider

    in GSAP

    Posted

    Hello,

    I'm trying to recreate this slider: https://bewegen.com/en its under the Accelerating Bike Share section.
    I managed to create the count slider but having trouble getting it back to count 1 when it hits the end count of 9 - smoothly have it loop back to the start.

    How to get the count to loop back to the start?

    Thank you.

    See the Pen GYEXXe by harp30 (@harp30) on CodePen

    SplitText beginner - needed help with an effect

    in GSAP

    Posted

    Done and done!!! Thank you so very much.

    I did a setTimeout function and gave a time of 3 seconds and it works very well and as expected!

     So the styles do need to load in first - its a webpack issue its not injecting the css file into the index.html. So, I gotta find out how to place css file into the html file without having to load it via js as webpack does.

    Maybe I can create a overlay bar and it takes 3 seconds to load and once loaded I can run the function..hmm lets see.

    Thank you so very much! Spent a day on this and have troubled you enough. Thank you thank you thank you!!!!

     

    • Like 1

    SplitText beginner - needed help with an effect

    in GSAP

    Posted

    Sorry, my mistake I misread the message about sending a smaller project. My apologizes.

    Is this anything to do with webpack setup? Cause for webpack all styles and everything goes into a javascript file.. maybe thats the issue? So, in my main.js file I could load the scss file when page is ready and then run the rest of the js code?

    Tried this:

    window.onload = function(){

        

    const scss = require('../scss/style.scss');

    }

     

    no change...

    And also how did you manage to slow it down? This will really help with debugging for me if I can learn how to do so.

    SplitText beginner - needed help with an effect

    in GSAP

    Posted · Edited by harp30
    content change

    Yes! Exactly it! The line count is off on my end but on codepen its dead accurate!

    This is the issue 100%!

    So I looked at the codepen version you just sent and I see 8 lines for large screen, 9, and goes higher as screen gets smaller - 34 lines for very small screens but on my end I see only 2 lines for large screens and highest it goes up via small screens is 7 lines - which is not matching the codepen version.

    So Codepen 8 lines and my local environment 2 lines for large screens.  Can This be a flexbox issue or issue on my end of styling?

     

    SplitText beginner - needed help with an effect

    in GSAP

    Posted

    yes, it all makes sense. In codepen its creating three .lines which is perfect - one .line for each block. But for me using the same sentence as codepen, its  creating only two .lines, which is the confusing part. So the three lines are being split as follows: two blocks into one .line and last block into second .line
    But there needs to be three .lines not two because there are three blocks.


    I created another codepen project and once again it works fine - its creating .line per one text block: so there are 3 blocks and 3 beautiful .line classes
    I have also attached the images into the codepen of the issues on my end. As you can see in the images there are only two .lines but there should be three like in the case of codepen.
    https://codepen.io/harp30/project/editor/AqbzjP

    But once again when i copy and paste and use this code.. theres an issue. I placed the "same exact code" in the above codepen and its fine but doesn't work when I use the code off of codepen.

    Thank you. Very tricky situation!

     

    splitText not breaking each block into separate .line

    in GSAP

    Posted

    Hello,

    This effect works beautifully but oddly enough when I place this code into my code editor I get a different result. The .line generated via SplitText Plugin is not breaking each .line via one block. .line1 is actually holding two blocks instead of one. Here is an attachment to show the issue.

    Not sure why its doing this. It works fine on codepen but not else where.. confused about this.

    Screen Shot 2018-07-05 at 8.12.54 AM-min.png

    See the Pen jKoVwL by harp30 (@harp30) on CodePen

1
2
Page 1 of 2  
×
×
  • Create New...