anotheruser

Members
  • Content count

    29
  • Joined

  • Last visited

Community Reputation

1 Newbie

About anotheruser

  • Rank
    Member

Profile Information

  • Gender
    Male

Recent Profile Visitors

1,158 profile views
  1. Bezier curve tween not happening from transform center

    I dont know why i went for that but i solved by setting the following TweenMax.set(svg, {xPercent: -50,yPercent: -50,x:xVal, y:yVal}); where xVal and yVal being the first points of the bezier.
  2. Hi, I have been trying to tween an svg using bezier curve , In that example i created a path where i am trying to tween this , But i cannot tween from center or create an offset , what happens now is it moves to the left corner and then start tweening along the path , but i want to tween as it is , Yes i know that i can set xPercent, but no I do not want that , because it changes the position of the svg. Also I would be using dynamic SVG so i cant be using morphsvg plugin I worked in flash before using the following code Now i need the same for JS
  3. Tween not happening from center for scale bezier

    Hey , the same user here , how to do the same in GSAP JS ?
  4. Create a radial wipe

    Haha , yeah , thanks again for this , Yeah i hate SVG's but still had to use this for clipping , thank a ton .
  5. Create a radial wipe

    Thanks again , is it possible to reverse the curve creation , now its clockwise , i need to do anticlockwise in your example i think it has to be done using startangle and sweep angle?
  6. Create a radial wipe

    Woah , A zilllllllion thanks dude , I was exactly looking for this , You really are a superhero , Thank you very much , I was stumbling on this part for two days
  7. Create a radial wipe

    @OSUblake Any suggestions ?
  8. Create a radial wipe

    Hi , I have to clip a div using a svg circle and reveal it using radial wipe using greensock , it can be done using jquery which i have found an example shown in the codepen attached , I need to tween the same using greensock. Any help?
  9. Scale video is very buggy

    @Sahil The above codepen still hangs for me , Hangs big time , is it working perfectly for you ? because the zooming effect was very buggy , wait i will try to record it and send you if possible
  10. Scale video is very buggy

    @GreenSock
  11. Scale video is very buggy

    Am not Animating the elements. There are no elements , I have a div, where i will add three videos <div class="imgclass"> <!-- FIRST VIDEO --> <div class="videoTag" style="clip-path: url(" #svgTextPath0 ")> <video preload="auto " class="videoElement " src="http://techslides.com/demos/sample-videos/small.mp4"></video> </div> <!-- SECOND VIDEO --> <div class="videoTag " style="clip-path: url( "#svgTextPath1"); background-color: rgb(135, 113, 150); "> <video preload="auto " class="videoElement " src="http://media.w3.org/2010/05/sintel/trailer.mp4"></video> </div> <!-- THIRD VIDEO --> <div class="videoTag " style="clip-path: url( "#svgTextPath2"); background-color: rgb(201, 16, 173); "> <video preload="auto " class="videoElement " src="http://techslides.com/demos/sample-videos/small.mp4"></video> </div> </div> In the example above you can see that I have a div where i will add three videos like Splitscreen videos just like below. So now i have a div with three videos in it. Right? Now all i got to do is zoomin (scale to 5) the parentdiv (imgclass). So after zooming in( zoom the div , so the videos have to zoom too) and it will have to look something like the image which i have attached below. I think now you got what i mean , sorry for delayed response. Now i have acheived what i said , but when i am zooming in the animation is buggy. Also i have tried what you have said before (setting parent position to relative and child video compoentns position to absolute) and am still experiencing the issue. Am animating the parent div alone , not the video tags , I just need a smooth zoomin effect
  12. Scale video is very buggy

    Not a curtain effect , just zoomin the cameraitems div and zoom out var videoDiv = document.getElementById("cameraItems"); //zoom in t1.add(TweenMax.to(videoDiv, 4, { scaleX: 3, scaleY: 3, ease: Linear.easeNone }),3); //zoom out t1.add(TweenMax.to(videoDiv, 2, { scaleX: 1, scaleY: 1, ease: Linear.easeNone }),7);
  13. Scale video is very buggy

    No . I am just using same video for three of the masks. Normally it will be 3 different videos , But the animation effect will be zoom in and zoom out . (scale to 5 and then sclae back to 1) just like in the following codepen. Meantime , thank you so much for your effort on helping me , it means a lot.
  14. Scale video is very buggy

    Yes , You got it , Thats what i want to do , but with the video. I got that working , actually I animated the cameraitems before adding the video to test whether scalein and scaleout works smoothly , it worked , but when i add videos to it , it started being buggy , The codepen you have shown is the animation effect i am trying to reproduce , but with video in it , I need the whole div to be zoomed in and zoomed out
  15. Scale video is very buggy

    Hi @Jonathan. Thank you very much for the reply , I have tried what you have said , I have added preload to the video and I have started tweening after the window load , please check the codepen Is there anything I am missing ? because it still hangs when zooming out,(( check the horizontal slanted lines between videos))