[Magnetic Hover Interaction with Cursor]

Hello,

might anyone know why the cursor is is tweening only on the last element and not on the first two, i have added a for each loop on the targeted elements but yet only works on the last one. I think it might be the if condition although it is giving true outcomes.

See the Pen bGpWmXd by nikhil-ladhani-nl (@nikhil-ladhani-nl) on CodePen

 

[How to add SplitText to Slider]

Hey Zach,

 I have read the documents and man I am working on old ones since long,

Thank you very much for showing me De Way

With that I have made improvement in my code as well as changed it to make it simpler and voila it is working as expected.
Below is the code pen if you any of you want to have a look and see the results. 

The only thing i am trying to figure out is that jquery does not convert the css- transform: translate(100%) as it is, but it converts to pixels but all is good.

Thank you very very much.

See the Pen mdPqWjy by nikhil-ladhani-nl (@nikhil-ladhani-nl) on CodePen

 

[How to add SplitText to Slider]

Hello,

Thank you, yepp i am able to see that mainly but chars = splitText.lines; I wanna use the chars as the variable instead of the $slides.  Whereby 

 

var $slides = $slider.find(".slider-item");

var $prevSlide = $slides.eq(prevSlideID);
var $currentSlide = $slides.eq(currentSlideID);
TweenMax.to($prevSlide, time, {
        top: "-100%"
      });
If you see the code above the tween is occurring on the word but as the whole item not the specific line like the on you showed me on developer tools,
and if is replace the $slide with chars the .eq function does not work, because i want to add staggering on the text as well

Any chance you might be knowing how handle this

 

[How to add SplitText to Slider]

Hi,

I have made a vertical slider with text, i want to add in the SplitText plugin that i have added but doesn't seem to work it on the code.

I have added the codepen below.
Can anyone help to see where i am going wrong. 
Thank you very much

See the Pen jOqGedJ by nikhil-ladhani-nl (@nikhil-ladhani-nl) on CodePen

[Magnetic Hover Interaction with Cursor]

Hey Zach,

Actually figured it form one of the projects, but thank you very much for the help

Cheers

[Magnetic Hover Interaction with Cursor]

Thank you very much Zach

I'm struggling a bit to combine the magnetic effect with the cursor one, as it's an urgent on the project i have to implement in.
Any chance i can get an example? 

[Magnetic Hover Interaction with Cursor]

Is there a way to achieve the effect of mouse hover like on the website below:

 

https://studiomaertens.com/about

 

if you hover on the Work or About link, there is a magentic effect on it as well as the cursor automatically scales and positions itself in center with the link,

So far ive managed to combine two different examples together, the magnetic effect works but the cursor doesnt align properly with the

icons

 

 

Might there be a way to make a similar effect on the Studiomaertens website above.

Kindly let me know

Thank you

See the Pen by pen (@pen) on CodePen

[Explosion and Reverse Particle Animation]

Hello,
I am trying to create an explosion on one button click and reverse of another button click of particles on three.js and TimelineMax, is there a simple example or place i can learn from?

Please kindly let me know

 

Thank you

[Scroll animation]

Hi Zach,

 

Ahhhh i see i see, it gets confusing whenever i try use scroll animation especially the calculations, offset top, scroll top, outer height , inner height, still catching up on that but I am slowly understanding the concept behind what you sent.

 

But i think im making it look more complicated than it seems because im confusing myself, but will learn.

 

Thank Very Very Much again 🙂.

[Scroll animation]

Hi,

Is there any way to achieve this type of animation while scrolling.

 

Im getting confused on the part where when if you scroll down new text-1 appear from bottom and current text-2 exit to up and reverse when scroll back up text-2 appears from top and text-1 exits bottom

 

https://www.apple.com/nz/ipad-pro/

 

The above is part of the section whereby when you scroll up the content fades down and when you scroll down content fades up

 

Similar to the above website, please kindly help me.

 

Thank You

 

[GSAP SplitText animation with Fullpage js]

Thank you, Thank You very much, I have gotten and yet learning more on the concept of how to animate but you have guided me to what I wanted,

 

I shall use the .play from now on to animate instead of the scroll listener  🙂

 

Happy and glad to use GSAP for animations as well!

[GSAP SplitText animation with Fullpage js]

Hey Zach, 

 

Thank You for the welcome!

I am very new to gsap making it abit otugh for me to understand some stuff you said about the timeline controls although I have managed to replicate it on codepen

 

As you can see at first the photobio title appears first rather than the top two titles and then if scroll directly it kinda breaks the gsap and doesnt animate properly, I think it might be because of the revert, as well as invisibilty hidden.

 

See the Pen JjdZbXE by nikhil-ladhani-nl (@nikhil-ladhani-nl) on CodePen

 

Hope this helps

[GSAP SplitText animation with Fullpage js]

Hi, I am looking for a solution that combines the two different text animations like on the websites below, I am also using fullpage js.

https://wirewerks.com/en/about-us/

https://21-capital.com/

 

So on each index of the page I am using if function for the animation, although without reverting the splittext it creates a duplicate each time i scroll to the specified animation page as it runs it again and again, that is why i had to revert it.

 

Sorry for not being able to replicate the code work on codepen.

 

var mainTitles = new SplitText('.strength-title h1, .free-session-title h1', {
                     type: "lines",
                   linesClass: "line line++"
                });
             $('.strength-title h1 .line , .free-session-title h1 .line, .photobio-title h1 .line').wrap('<div class="line-wrapper">');

TweenMax.staggerFrom(
                     mainTitles.lines,
                     2, {
                         yPercent: 100,
                        ease: Power4.easeOut,
                         delay: 1
                    },
                     0.25,
                     splitRevert
                 );

                 $('.strength-title h1, .free-session-title h1').css('visibility', 'visible');
        
                 var tp = gsap.timeline(),
                    mySplitText = new SplitText(".photobio-title p", {
                         type: "lines,words"
                    }),
                     chars = mySplitText.lines; 
        
                 tp.fromTo(chars, 1.5, {
                     opacity: 1,
                     y: 0,
                    ease: Power4.easeOut,
                     stagger: 0.15,
        //         }, {
        //             opacity: 0,
        //             y: 100,
        //             ease: Power4.easeOut,
        //             stagger: 0,
        //         }, "+=0");
        //
        //         function splitRevert() {
        //             $('.strength-title h1 .line , .free-session-title h1 .line , .photobio-title h1 .line').unwrap();
        //             mainTitles.revert();
                     $('.photobio-title p').css('visibility', 'hidden');
                    mySplitText.revert();
                 }

 

This formation is not currently working smoothly for me, if anyone has a possible solution please kindly do help me.

Thank You