silverd

September 21, 2020

Hello Zach thanks I will try it's just complicate because the project is on nuxtjs (vuejs) and so the document.body is probably weirdly understood by this framework because every time I uncomment that

// Smooth scroll setup
      const bodyScrollBar = Scrollbar.init(document.body, {
        damping: 0.1,
        delegateTo: document,
      });
      bodyScrollBar.setPosition(0, 0);
      bodyScrollBar.track.xAxis.element.remove();

      // How to get them to work together
      ScrollTrigger.scrollerProxy("body", {
        scrollTop(value) {
          if (arguments.length) {
            bodyScrollBar.scrollTop = value;
          }
          return bodyScrollBar.scrollTop;
        },
      });

everything outside the screen is hidden like with the overflow hidden but I can scroll just nothing to see
I will try to do something on codepen or something like that for vue

September 21, 2020

I have no error and the smooth scroll work perfectly but when I put it into the default layouts of vueJs all the animation depending of scroll-trigger doesn't work anymore
did I forget something ?

// Smooth scroll setup
      const bodyScrollBar = Scrollbar.init(document.body, {
        damping: 0.1,
        delegateTo: document,
      });

      bodyScrollBar.setPosition(0, 0);
      bodyScrollBar.track.xAxis.element.remove();

      // How to get them to work together
      ScrollTrigger.scrollerProxy("body", {
        scrollTop(value) {
          if (arguments.length) {
            bodyScrollBar.scrollTop = value;
          }
          return bodyScrollBar.scrollTop;
        },
      });

September 21, 2020

ah yes now I have no more error but it's not working anymore everything is hidden but thanks no more error

September 21, 2020

Hello I have just this error and I have no idea why

gsap_dist_ScrollTrigger__WEBPACK_IMPORTED_MODULE_12__.ScrollTrigger.scrollerProxy is not a function

The scrollTrigger works perfectly, I just wanted to add some smooth to my scroll so I added that part


      // Smooth scroll setup
      const bodyScrollBar = Scrollbar.init(document.body, {
        damping: 0.1,
        delegateTo: document,
      });

      bodyScrollBar.setPosition(0, 0);
      bodyScrollBar.track.xAxis.element.remove();

      // How to get them to work together
      ScrollTrigger.scrollerProxy("body", {
        scrollTop(value) {
          if (arguments.length) {
            bodyScrollBar.scrollTop = value;
          }
          return bodyScrollBar.scrollTop;
        },
      });

the import works perfectly otherwise my timeline below would not works

import { gsap } from "gsap/dist/gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

import Scrollbar from "smooth-scrollbar";

so I am a bit confused because that part works fine

let sections = gsap.utils.toArray(".linkProject");

      let tl = gsap.timeline({
        defaults: { ease: "expo.inOut" },
        scrollTrigger: {
          trigger: ".projectsListing",
          scrub: 1,
          // markers: true,
          toggleActions: "restart pause reverse pause",
          end: "bottom 90%",
          // end: () =>
          //   "+=" + document.querySelector(".projectsListing").offsetHeight,
        },
      });

      tl.from(sections, {
        y: -120,
        opacity: 0,
        duration: 1.45,
        transformOrigin: "center",
        scale: 0.45,
        stagger: 0.75,
      });

the only part doesn't working in this is the end function he doesn't seem understand offsetHeight or offsetWidth but that is an other topic and probably related to vuejs

July 21, 2020

I will try your example maybe it will work thanks sorry if I am not really clear it's not a child into a parent but more a child into a parents sibling of the parent I want to reach anyway thank you

July 21, 2020

for your component your $emit is into the logo who is called inside the index.vue that I already saw plenty of example like that and it's quite common but I called my component loader on the layout default and like that is above the nuxt route the header and footer who are in the default.vue layout

maybe I am totally wrong into my application splitting but I tried to organised everything into my default layout to be sure is everywhere if needed

July 21, 2020

Hello
here a link to my sandbox https://codesandbox.io/s/test-loading-u4485?file=/layouts/parts/Loader.vue

like you can see the emit is into the loader.vue maybe not the right place I never really understood this emit yet and how get the data inside the index.vue where the tlHome is because I have to do .play on this specific tl

July 21, 2020

Hahahaha in fact I try just to know when my animation from a component is done like that I can start the other one

my tlHome is my timeline from my <nuxt/> component index/home
I was just hoping maybe someone have the same kind of issue because it's difficult to explain and difficult to share but my loader component have animation when it's done complete I would like to start the animation of my home one
maybe I will try to use the states from VueX

July 21, 2020

Hello Guys

I have a question maybe it will be not clear but I hope and if there is already an answer for this specific question pls let me know

so I have my portfolio app a nuxtjs app (vuejs) I have a loader so obviously it will be trigger only when you enter into my portfolio and it's working good but I would like to with the onComplete to pass a timeline.play to my first screen after the loading to start exactly after the loading ending

but my issue is I have no idea how to proceed I thought to use an $emit but it seem didn't work

here my layout

<div id="app">
<Loader/>
<Header/>
<nuxt />
<Footer/>
<BgDecor/>
</div>

here my loader

methods:{
init(){
const loader = document.querySelector('.loader')
const logo = document.querySelector('.loaderLogo')
const messages = document.querySelector('.messages')
const fillLogo = document.querySelector('#fillLogo')
const strokeLogo = document.querySelector('#strokeLogo')
let tl = gsap.timeline({
onComplete: function(){
console.log('fini')
this.loading = false
this.$emit(tlHome.play())
}
})

tl.set(logo, {scale: 3})
tl.set(messages, {autoAlpha: 0})
tl.to(logo, { duration: 3, opacity: 1 })
.from(strokeLogo, { duration: 6, drawSVG:"0" }, "-=2")
.to(logo,{ duration: 1, scale: 1 }, "-=4.5")
.to(strokeLogo,{ duration:1, opacity:0 }, "-=2.5")
.from(fillLogo, { duration: 1, opacity:0 }, "-=2.5")
.to(loader, {duration:.65, opacity:0, display:'none'})

//console.log("duration is: " + tl.duration());
}
},

mounted(){
this.init()
}

the fini is trigger the loading false a well but the tlHome is not recognised even if I tryed with this.tlHome.play()

I just hope someone had already a similar issue probably passing variables from sibling or parents child parents is not the correct way for that but because Footer Header etc are split into components i would like to make sure the animation and timeline are triggering correctly when it's like that I tried to put a delay but obviously if I put a delay I have to use it only when the loader is called not everytime otherwise te home showing anim will be a bit long

thanks anyway

February 25, 2014

Yes great the design is perfect

sorry about codepen the next time

February 25, 2014

Thanks

but the render it's not very good with your example maybe it's better with svg ?

i have two functions and with that my design is perfect

        function init() {

          var canvas = document.getElementById("canvas");
          var ctx = canvas.getContext("2d");

          draw(ctx);
        }

function draw(ctx) {

          // fondCopie/Trac transparent
          ctx.save();
          ctx.beginPath();

          // fondCopie/Trac transparent/Trac
          ctx.moveTo(90.0, 113.5);
          ctx.bezierCurveTo(79.9, 113.5, 67.1, 111.3, 61.8, 106.7);
          ctx.bezierCurveTo(59.6, 94.5, 55.7, 85.9, 51.5, 75.7);
          ctx.bezierCurveTo(47.3, 65.6, 52.9, 56.0, 56.5, 49.6);
          ctx.bezierCurveTo(58.7, 45.5, 67.1, 40.7, 71.9, 38.7);
          ctx.bezierCurveTo(72.8, 38.3, 73.6, 38.0, 74.5, 37.7);
          ctx.bezierCurveTo(75.6, 37.7, 76.7, 37.8, 77.7, 37.9);
          ctx.bezierCurveTo(75.1, 40.7, 73.0, 42.5, 73.0, 43.7);
          ctx.bezierCurveTo(73.0, 44.8, 73.5, 47.0, 75.1, 48.9);
          ctx.bezierCurveTo(75.1, 48.9, 75.1, 45.2, 79.0, 46.0);
          ctx.bezierCurveTo(79.0, 46.0, 88.6, 49.9, 88.6, 51.6);
          ctx.bezierCurveTo(88.6, 51.6, 88.0, 55.6, 88.0, 64.7);
          ctx.bezierCurveTo(88.0, 73.5, 89.9, 101.7, 90.0, 103.6);
          ctx.lineTo(90.0, 103.7);
          ctx.bezierCurveTo(90.0, 103.7, 90.0, 103.7, 90.0, 103.7);
          ctx.bezierCurveTo(90.0, 103.7, 90.0, 103.7, 90.0, 103.7);
          ctx.bezierCurveTo(90.0, 103.7, 90.0, 103.7, 90.0, 103.7);
          ctx.bezierCurveTo(90.0, 103.7, 90.0, 103.7, 90.0, 103.7);
          ctx.lineTo(90.0, 103.6);
          ctx.bezierCurveTo(90.1, 101.7, 92.0, 73.5, 92.0, 64.7);
          ctx.bezierCurveTo(92.0, 55.6, 91.4, 51.6, 91.4, 51.6);
          ctx.bezierCurveTo(91.4, 49.9, 101.0, 46.0, 101.0, 46.0);
          ctx.bezierCurveTo(104.9, 45.2, 104.9, 48.9, 104.9, 48.9);
          ctx.bezierCurveTo(106.5, 47.0, 107.0, 44.8, 107.0, 43.7);
          ctx.bezierCurveTo(107.0, 42.5, 104.9, 40.7, 102.3, 37.9);
          ctx.bezierCurveTo(103.3, 37.8, 104.4, 37.7, 105.5, 37.7);
          ctx.bezierCurveTo(106.4, 38.0, 107.3, 38.3, 108.1, 38.7);
          ctx.bezierCurveTo(112.9, 40.7, 121.3, 45.5, 123.5, 49.6);
          ctx.bezierCurveTo(127.1, 56.0, 132.8, 65.6, 128.5, 75.7);
          ctx.bezierCurveTo(124.3, 85.9, 120.4, 94.5, 118.2, 106.7);
          ctx.bezierCurveTo(112.9, 111.3, 100.1, 113.5, 90.0, 113.5);
          ctx.closePath();

          // fondCopie/Trac transparent/Trac
          ctx.moveTo(48.5, 33.4);
          ctx.bezierCurveTo(54.4, 29.1, 60.4, 25.9, 74.4, 35.2);
          ctx.bezierCurveTo(74.4, 35.2, 56.2, 38.2, 48.5, 33.4);
          ctx.closePath();

          // fondCopie/Trac transparent/Trac
          ctx.moveTo(105.6, 35.2);
          ctx.bezierCurveTo(119.6, 25.9, 125.6, 29.1, 131.5, 33.4);
          ctx.bezierCurveTo(123.8, 38.2, 105.6, 35.2, 105.6, 35.2);
          ctx.closePath();

          // fondCopie/Trac transparent/Trac
          ctx.moveTo(179.9, 24.0);
          ctx.bezierCurveTo(178.8, 31.6, 176.2, 33.7, 171.0, 36.0);
          ctx.bezierCurveTo(165.2, 38.5, 162.2, 37.4, 155.7, 37.7);
          ctx.bezierCurveTo(154.6, 36.2, 153.5, 34.6, 149.4, 28.3);
          ctx.bezierCurveTo(149.4, 28.3, 155.9, 26.6, 164.2, 32.9);
          ctx.bezierCurveTo(163.1, 31.1, 161.9, 29.6, 159.8, 27.8);
          ctx.bezierCurveTo(157.6, 26.1, 152.0, 23.4, 147.7, 24.7);
          ctx.bezierCurveTo(146.2, 25.2, 145.1, 26.0, 144.1, 27.2);
          ctx.bezierCurveTo(143.5, 27.9, 143.5, 27.8, 144.1, 28.5);
          ctx.bezierCurveTo(144.3, 28.7, 144.5, 29.0, 144.7, 29.2);
          ctx.bezierCurveTo(148.4, 33.5, 158.6, 44.0, 161.8, 49.9);
          ctx.bezierCurveTo(164.9, 55.6, 168.9, 70.5, 168.8, 77.0);
          ctx.bezierCurveTo(165.4, 77.5, 161.1, 77.0, 153.6, 87.9);
          ctx.bezierCurveTo(150.0, 93.1, 145.2, 97.2, 138.1, 100.3);
          ctx.bezierCurveTo(136.8, 97.8, 137.2, 92.7, 139.7, 89.8);
          ctx.bezierCurveTo(134.3, 94.3, 131.5, 98.5, 132.5, 106.2);
          ctx.bezierCurveTo(128.7, 107.5, 124.0, 107.6, 122.3, 104.1);
          ctx.bezierCurveTo(120.6, 100.6, 122.0, 95.4, 125.8, 87.5);
          ctx.bezierCurveTo(130.5, 77.4, 132.8, 74.9, 133.5, 64.5);
          ctx.bezierCurveTo(134.0, 56.3, 130.3, 49.4, 127.1, 45.1);
          ctx.bezierCurveTo(124.3, 41.3, 117.2, 39.2, 112.8, 37.3);
          ctx.bezierCurveTo(127.8, 39.6, 140.0, 33.8, 140.0, 33.8);
          ctx.bezierCurveTo(135.3, 28.1, 131.3, 27.7, 131.3, 27.7);
          ctx.bezierCurveTo(132.9, 27.1, 136.1, 26.9, 136.1, 26.9);
          ctx.bezierCurveTo(123.8, 21.8, 114.6, 25.9, 110.2, 29.9);
          ctx.bezierCurveTo(108.5, 31.5, 104.9, 33.6, 102.0, 33.7);
          ctx.bezierCurveTo(99.1, 33.8, 98.5, 33.3, 97.6, 33.1);
          ctx.bezierCurveTo(97.6, 33.1, 94.6, 30.7, 90.0, 30.7);
          ctx.lineTo(90.0, 30.7);
          ctx.lineTo(90.0, 30.7);
          ctx.bezierCurveTo(90.0, 30.7, 90.0, 30.7, 90.0, 30.7);
          ctx.lineTo(90.0, 30.7);
          ctx.bezierCurveTo(90.0, 30.7, 90.0, 30.7, 90.0, 30.7);
          ctx.lineTo(90.0, 30.7);
          ctx.lineTo(90.0, 30.7);
          ctx.bezierCurveTo(90.0, 30.7, 90.0, 30.7, 90.0, 30.7);
          ctx.lineTo(90.0, 30.7);
          ctx.lineTo(90.0, 30.7);
          ctx.lineTo(90.0, 30.7);
          ctx.bezierCurveTo(85.4, 30.7, 82.4, 33.1, 82.4, 33.1);
          ctx.bezierCurveTo(81.5, 33.3, 80.9, 33.8, 78.0, 33.7);
          ctx.bezierCurveTo(75.1, 33.6, 71.5, 31.5, 69.8, 29.9);
          ctx.bezierCurveTo(65.4, 25.9, 56.2, 21.8, 43.9, 26.9);
          ctx.bezierCurveTo(43.9, 26.9, 47.1, 27.1, 48.7, 27.7);
          ctx.bezierCurveTo(48.7, 27.7, 44.7, 28.1, 40.0, 33.8);
          ctx.bezierCurveTo(40.0, 33.8, 52.2, 39.6, 67.2, 37.3);
          ctx.bezierCurveTo(62.8, 39.2, 55.7, 41.3, 52.9, 45.1);
          ctx.bezierCurveTo(49.7, 49.4, 46.0, 56.3, 46.5, 64.5);
          ctx.bezierCurveTo(47.2, 74.9, 49.5, 77.4, 54.2, 87.5);
          ctx.bezierCurveTo(58.0, 95.4, 59.4, 100.6, 57.7, 104.1);
          ctx.bezierCurveTo(56.0, 107.6, 51.3, 107.5, 47.5, 106.2);
          ctx.bezierCurveTo(48.5, 98.5, 45.7, 94.3, 40.3, 89.8);
          ctx.bezierCurveTo(42.8, 92.7, 43.2, 97.8, 41.9, 100.3);
          ctx.bezierCurveTo(34.8, 97.2, 30.0, 93.1, 26.4, 87.9);
          ctx.bezierCurveTo(18.9, 77.0, 14.6, 77.5, 11.2, 77.0);
          ctx.bezierCurveTo(11.1, 70.5, 15.1, 55.6, 18.2, 49.9);
          ctx.bezierCurveTo(21.4, 44.0, 31.6, 33.5, 35.3, 29.2);
          ctx.bezierCurveTo(35.5, 29.0, 35.7, 28.7, 35.9, 28.5);
          ctx.bezierCurveTo(36.5, 27.8, 36.5, 27.9, 35.9, 27.2);
          ctx.bezierCurveTo(34.9, 26.0, 33.8, 25.2, 32.3, 24.7);
          ctx.bezierCurveTo(28.0, 23.4, 22.4, 26.1, 20.2, 27.8);
          ctx.bezierCurveTo(18.1, 29.6, 16.9, 31.1, 15.8, 32.9);
          ctx.bezierCurveTo(24.1, 26.6, 30.6, 28.3, 30.6, 28.3);
          ctx.bezierCurveTo(26.5, 34.6, 25.4, 36.2, 24.3, 37.7);
          ctx.bezierCurveTo(17.8, 37.4, 14.8, 38.5, 9.0, 36.0);
          ctx.bezierCurveTo(3.8, 33.7, 1.2, 31.6, 0.1, 24.0);
          ctx.bezierCurveTo(-0.9, 16.2, 5.1, 8.3, 8.4, 5.0);
          ctx.bezierCurveTo(11.7, 1.7, 15.7, -0.4, 20.8, 0.1);
          ctx.bezierCurveTo(25.1, 0.5, 28.8, 1.1, 33.4, 4.8);
          ctx.bezierCurveTo(38.0, 8.4, 40.4, 11.0, 43.4, 12.0);
          ctx.bezierCurveTo(45.5, 12.6, 47.8, 12.5, 50.7, 10.9);
          ctx.bezierCurveTo(52.5, 9.9, 54.6, 9.0, 56.7, 8.6);
          ctx.bezierCurveTo(62.6, 7.0, 68.8, 9.1, 74.0, 11.9);
          ctx.bezierCurveTo(77.0, 13.5, 79.8, 15.4, 82.7, 17.1);
          ctx.bezierCurveTo(84.7, 18.4, 86.9, 19.6, 89.4, 19.8);
          ctx.bezierCurveTo(89.6, 19.8, 89.8, 19.8, 90.0, 19.8);
          ctx.lineTo(90.0, 19.8);
          ctx.lineTo(90.0, 19.8);
          ctx.lineTo(90.0, 19.8);
          ctx.lineTo(90.0, 19.8);
          ctx.bezierCurveTo(90.0, 19.8, 90.0, 19.8, 90.0, 19.8);
          ctx.lineTo(90.0, 19.8);
          ctx.lineTo(90.0, 19.8);
          ctx.bezierCurveTo(90.2, 19.8, 90.4, 19.8, 90.6, 19.8);
          ctx.bezierCurveTo(93.1, 19.6, 95.3, 18.4, 97.3, 17.1);
          ctx.bezierCurveTo(100.2, 15.4, 103.0, 13.5, 106.0, 11.9);
          ctx.bezierCurveTo(111.2, 9.1, 117.4, 7.0, 123.3, 8.6);
          ctx.bezierCurveTo(125.4, 9.0, 127.5, 9.9, 129.3, 10.9);
          ctx.bezierCurveTo(132.2, 12.5, 134.5, 12.6, 136.6, 12.0);
          ctx.bezierCurveTo(139.6, 11.0, 142.0, 8.4, 146.6, 4.8);
          ctx.bezierCurveTo(151.2, 1.1, 154.9, 0.5, 159.2, 0.1);
          ctx.bezierCurveTo(164.3, -0.4, 168.3, 1.7, 171.6, 5.0);
          ctx.bezierCurveTo(174.9, 8.3, 180.9, 16.2, 179.9, 24.0);
          ctx.closePath();
          ctx.fillStyle = colorLogo;
          ctx.fill();
          ctx.restore();
        }

it's my logo i would like that it is pixel perfect

February 25, 2014

Hi

i have a question maybe it's simple but maybe not

I would like animate a color of canvas shape but i don't understand how

in my draw ctx i have this line

ctx.fillStyle = colorLogo;

colorLogo it's my variable

var colorLogo = "rgb(65, 190, 238)";

but with css in tweeMax i don't understand how i have to proceed

can you help me ?

i have to create a function animate ?

Thanks

December 9, 2013

Hello Rodrigo,

This is a continuation of my question about text animation on the path

I have not been able to do what I wanted with my text animation so I had to tweak it, taking a .gif animation is text around my form.
That's why I have to trigger this gif. at a specific time.

I know it's not a best practice but since I can not do it I had to try another way

I should add the ".gif" at this time otherwise the animation will start from the beginning of the timeline and thus arrived at the point in question, the animation is already finished: (

Best

Jeff

December 9, 2013

Hi Rodrigo,

thanks

I wanted to know : why It's not possible to do easily

tl.add(slide02.append('<img src="img/text.gif">'), 1.2, {autoAlpha:1, ease:Power2.easeOut});

or .to or .insert
because the image.gif is load in the start of animation

I throught that as the "addchild" in flash until i don't use "addchild" the animation.gif is not load

A bit like "load" my picture just in my timeline at the precise moment I want without using a simple function for it. Because there my function is very very simple

maybe too simple for just load one image.gif

But it's maybe not possible without it.

Thanks

December 8, 2013

Hello

i think it's simple but i would like add and remove a image .gif in my timelineMax

I tried to do :

tl.to(slide02.append('<img src="img/text.gif">'), 1.2, {autoAlpha:1, ease:Power2.easeOut});

and add or insert

but my problem it's that the image .gif begin in start of timeline but i don"t want that, because the .gif is animate and the animation have to start after few others animations.

I tried with onComplete and the function but after i don't know how the remove it because after the gif animation i have few others animations and I think it's not the best way

function addImageGif () {
    document.getElementById("imgText").innerHTML='<img src="img/text.gif">';
};

Can you help me ?

Thanks

December 6, 2013

Hi Rodrigo

thanks for your help i m going to try with that

it's a little bit hard the SVG and bezierToCurv but i m going to find a solution with your explanation

Thanks again

you are the best

Jeff

December 6, 2013

Thanks Rodrigo

It's easy when you explain to me like that

Easy easy it's a big word but more easy

I read the D3.js tutorial and i tried to understant it, but it's not very easy for me i'm a beginner not a expert in javascript

because in this tutorial the svg is a random path not a design path.

I am going to try with kiwi svg example I think it's more easy like that

My words have to follow the kiwi path on start and after i use your second part of explaination for go to the straight line

Thks

Jeff

December 6, 2013

Maybe If I use a textPath for following my complexe path

it's maybe a solution no ?

but for go to the end straight line, maybe it's too strange

December 5, 2013

Thanks Rodrigo

I am going to try to do that

it's maybe a little hard because i would like to do a animation after, as you do in your first example code to do a straight line at the end

because if the path are to hard maybe the animation doesn't work easily

Thanks a lot for your help

If you can, send me how i must do for protect my buy file (SplitText) as you say me

Jeff

December 5, 2013

Hi again

I have a question in your code you use path with x and y

but when I generate my path in canvas i have this :

 ctx.save();
      ctx.beginPath();
      ctx.moveTo(7.1, 217.8);
      ctx.bezierCurveTo(-10.4, 157.9, 4.4, 87.8, 59.7, 41.1);
      ctx.bezierCurveTo(167.9, -50.4, 242.2, 40.0, 242.2, 40.0);
      ctx.lineTo(248.1, 38.3);
      ctx.bezierCurveTo(253.0, 38.3, 279.1, 50.2, 284.4, 57.2);
      ctx.bezierCurveTo(289.6, 64.2, 326.8, 88.5, 326.8, 88.5);
      ctx.bezierCurveTo(326.8, 88.5, 356.4, 78.3, 362.3, 82.6);
      ctx.lineTo(381.2, 105.8);
      ctx.bezierCurveTo(381.2, 105.8, 402.6, 117.5, 394.1, 158.6);
      ctx.bezierCurveTo(394.1, 158.6, 402.1, 189.6, 376.4, 212.0);
      ctx.lineTo(351.9, 233.9);
      ctx.bezierCurveTo(351.9, 233.9, 326.7, 265.4, 325.7, 271.3);
      ctx.bezierCurveTo(324.6, 277.2, 327.9, 281.1, 327.9, 281.1);
      ctx.bezierCurveTo(291.4, 309.8, 235.9, 357.6, 132.7, 336.5);
      ctx.bezierCurveTo(73.9, 324.5, 27.2, 279.2, 8.9, 223.8);
      ctx.lineWidth = 0.3;
      ctx.strokeStyle = "rgb(255, 0, 0)";
      ctx.stroke();
      ctx.restore();

and in svg format I have this kind of code :

<path fill="none" stroke="#FF0000" stroke-width="0.2728" stroke-miterlimit="10" d="M290.514,343.786
	c-17.428-59.95-2.708-130.075,52.588-176.768c108.298-91.447,182.549-1.122,182.549-1.122l5.886-1.62
	c4.889,0,31.048,11.87,36.288,18.88c5.234,7.015,42.408,31.286,42.408,31.286s29.63-10.246,35.557-5.931l18.854,23.193
	c0,0,21.411,11.703,12.865,52.837c0,0,8.012,30.986-17.628,53.423l-24.575,21.901c0,0-25.105,31.517-26.174,37.394
	c-1.07,5.875,2.176,9.762,2.176,9.762c-36.424,28.727-91.977,76.481-195.137,55.445c-58.833-11.998-105.521-57.316-123.817-112.75"
	/>

How to do for translate that in position x and y

Where Can I find that, you have a "software" or a "website" to find the coordonates x and y ? because my path are also complexe

Thanks

December 5, 2013

Thanks

Yes i am going maybe try the contest

i had thinking also use SplitText i m already club member but the animation is for a customer maybe and i don't want put this plugin in the package it's normal

i saw the new video on SplitText yesterday it's awesome

December 4, 2013

Yes like that

I can put in place of the square, a letter from my sentence and return to a straight line like that, you think?
Because in fact I would like to make an animation from a text on a path, which follows the shape of shell and return to a normal text line

Thanks

December 4, 2013

Yes a little

but i would like to start from the arc text (your finish) to inline text standard

it's maybe the same think in the other way

I would like to beziers curves so that they become flat (inline)

as a Arc to become a line but with text

Maybe i am not very clear

December 4, 2013

Hello

thanks for your work it's so great

i just have a question i would like to do a animation from this : http://csswarp.eleqtriq.com/ to the text not curve (standard)

how i can do this ? Use "straggerFrom" for all letter ? any ideas ?

thanks for help

Notifications

Messages

silverd

Posts

Joined

Last visited

Content Type

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by silverd

VueJS Gsap

VueJS Gsap

VueJS Gsap

VueJS Gsap

NuxtJS Gsap

NuxtJS Gsap

NuxtJS Gsap

NuxtJS Gsap

NuxtJS Gsap

Animate a Canvas Color

Animate a Canvas Color

Animate a Canvas Color

Simple Question

Simple Question

Simple Question

Text Animation

Text Animation

Text Animation

Text Animation

Text Animation

Text Animation

Text Animation

Text Animation

Text Animation