[Animation circle to square using tweenmax]

Hey I am very new to svg and I am trying to do the same thing(reversed) but I can't understand how the #rect is being morphed to with a visibility: hidden, or don't understand where in your code your have dealt with this.

[Cleaning up repetitive animations]

Similarly I have created scrollTriggers like this, adding previously created animations:

Quote

ScrollTrigger.create({
trigger: ".hello",
start: "top top",
end: "+=1000px",
scrub: true,
animation: colorToBlue

});

However I am also repeating this code a few times.. is there any way around this?

 

[Cleaning up repetitive animations]

Hello!

I have been researching into timeline organisation as I have a lot of  animation on my current project. I have read that animations should be put into their own functions and then added to the master timeline, cleaning up the code a lot. However my question is specifically about a scrolltrigger animation that I am repeating, as the trigger and the target/selector are different, however the rest of the code stays the same. Any recommendations?

gsap.from(".about .char", {
  scrollTrigger: {
    trigger: ".about",
    start: "top-=50 80%",
    end: "+=100",
    scrub: 1,
    toggleActions: "play none reverse reset"
  },
  rotation: 180,
  transformOrigin: "50% 100%",
  opacity: 0,
  duration: 0.5
});

 

[GSAP timeline sometimes works correct and sometimes does not]

Thanks so much @Shaun Gorneau!

I definitely felt like I was repeating too much code but I'm a bit of a beginner, so thanks for fixing it up.

However, it has lost one main functionality. Originally, any white outlined text overflowing the frame of the image would be hidden, so the outer edges would have original color whilst the middle would be white.

I removed the first timeline animation on ".image-title" and all sorted! Thanks for all the help!!

[GSAP timeline sometimes works correct and sometimes does not]

Hey!

I have been playing around with clip-paths and overlays and what I am aiming to do is hover over the word ".image-title" and an image will appear giving the effect that the text only being framed by the image will change to have white outline. (Easier to show than explain..)

Actually, I am pretty sure that the timeline is not the issue here, I think it has something to do with the jQuery event triggers. I was hoping someone could help me understand why sometimes the white ouline text appears and why sometimes it doesn't and how I could fix this? It is tricky because i want the image and white outline to appear ontop of the original text, but the original text needs to be listening for the event triggers.

Thanks for reading!

See the Pen bGgOpXd by tallulahh (@tallulahh) on CodePen

[Scroll to div on mouse scroll up/down]

I do appreciate that. All i want to know is if the document length is higher the following code is effected

$(window).scroll(function() {
    var scrollTop = $(window).scrollTop();
    var docHeight = $(document).height();
    var winHeight = $(window).height();
    if (scrollTop >= 0) {
      t1.progress(scrollTop / (docHeight - winHeight));
    }
  });

 

[Scroll to div on mouse scroll up/down]

7 minutes ago, mikel said:

Hey @tallulahh,

 

Welcome to the GreenSock Forum.

Then go back to 'start' and check the desired effect with every change.

Without seeing the case live, it is difficult to give advice.

 

Happy tweening ...

Mikel

Hey! Thanks for such a quick reply.. I have just loaded it onto codepen if you could take a look that would be amazing!

See the Pen PoqOqqz by tallulahh (@tallulahh) on CodePen

 

To clarify, the rotation speed of the ".slide" has become slower - it could be that i need to clarify more values in the gsap code. My intention is for the 3 slides to start rotating onto the screen so that they appear just after the home screen(".hero"), once it has rotated through the 3 slides I want the timeline to stop essentially and the ".gallery-section" to then come on screen. Any advice would be appreciated and thanks in advance!

 

[Scroll to div on mouse scroll up/down]

On 4/10/2019 at 12:31 PM, mikel said:

Hi @tun712,

 

I really do not understand your intentions.
What should happen to the elements '.pane'?

 

Just for fun - maybe it fits into your concept - here's a forked version of @Shaun Gorneau`s smart version 'pseudo-window' and scroll:

 

 

 

 

 

Happy tweening ...

Mikel

Hey, a quick question.. in the js file where the $(window).scroll() defines the movement of the scroll.. does the document height then effect the speed at which the slides load? Copying and pasting this code works perfect but I have obviously changed some code around with certain style attributes like position and top distances, and now find that the slide appears slowly(changing the duration in gsap doesn't work). I would appreciate any help!