Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Vitaliy Bagmet

ShockinglyGreen
  • Posts

    19
  • Joined

  • Last visited

Posts posted by Vitaliy Bagmet

  1. 10 minutes ago, Hayaku said:

    Was looking for the exact same thing,

    it's indeed not possible to add the timeline from contentWindow, i always get an error, no matter what :

     

    Maybe the contentWindow Mechanism somehow change the signature of the variable.

     

    But i soon realize you can actually control the contentWindow's timeline with it's own functions (like pause() play() and ... progress !).

     

    So i came with this quick and dirty implementation, witch actually works : 

    
        var iframe = document.getElementById("timeline1");
        var iframe2 = document.getElementById("timeline2");
        var timeline = new TimelineMax({id:"masterTimeline"});
        var tl1=new TimelineMax({id:"timeline1"});
        var tl2=new TimelineMax({id:"timeline2"});
    
    	iframe.onload = function() {
        	var contentWindow=iframe.contentWindow;
        	var tl=contentWindow.mainTimeline;
        	tl.pause(0);
          
        	// console.log(tl);
        	// tl1.add(tl);
        	tl1.to(tl,tl.totalDuration(),{totalProgress:1,ease:Linear.easeNone})
        	
    	}
    	iframe2.onload = function() {
        	var contentWindow=iframe2.contentWindow;
        	var tl=contentWindow.mainTimeline;
        	tl.pause(0);
        	tl2.to(tl,tl.totalDuration(),{totalProgress:1,ease:Linear.easeNone})
        	
    	}
    	timeline.add(tl1);
    	timeline.add(tl2);
        GSDevTools.create({animation:timeline,globalSync:false});

     

     

    Enjoy ;-)

     

     

    Hi Hayaku,

     

    Oh I have paused this idea implementation for uncertain time. 

    Many thanks for coming up with that! Will do test on my side soon.

     

    Cheers

    Vitaliy

     

  2. Much appreciated for comments and suggestions, dear Jack and Jonathan.

     

    Jonathan, no, I'm not interested in codepen iframes actually, just wanted to show my local setup but of course thanks for details.

     

    Jack, right exactly. Thanks for tip. I have followed your suggestion (locally on my computer):

    - wrapped iframe timeline in function with return + attached timeline to iframe window object

    - got iframe timeline from parent through contentWindow

    - added it to TimelineLite 

    - created GSDevTools instance with mentioned properties

     

    ...but that didn't workout for me (though no issues in console).

    GSDevTools is not seeing passed iframe timeline and it's id.

     

    I'm wrapping my head with this case right from GSDevTools realease.

    Unfortunately my JS skills are not so solid I'd want too...

     

    Now I'm having thoughts that my idea of controlling and tweaking iframe animation from parent GSDevTools with approach above is a wrong way.

    I guess there should be some 2-way data-binding/reactivity for that (Vue.js for example).

     

    What do you think about all that?

    Can I prepare some demo files and upload them?

     

    Thanks

    Vitaliy

  3. Hi GSAP folks,

     

    Please help to sort out the following.

     

    Imagine I have index.html with 2 iframes with timeline in each one.

    What I'd want to is getting and controlling each iframe timeline with GSDevTools from opened index.html where these iframes are placed.

     

    The question is how to make GSDevTools to see timelines from iframes?

    Here I've used codepen iframes but of course in fact there should be local html files.

    Maybe it's more JS specific question.

     

    Thanks in advance.

     

    Cheers

    Vitaliy

     

    See the Pen WZVqGr by bagmetv (@bagmetv) on CodePen

  4. Hi little_fat_girl,

     

    Your struggling is quite close to me.

    So I'd like to add my few thoughts looking back on my some recent experience.

     

    I was working in Flash and Animate CC for years. I even was Animate CC beta tester.

    After seeing/experiencing constant lags, bugs and no progress in solving that I have decided to replace that software at all.

     

    I'm very happy that I have found GSAP, this great forum, its people and spent some really short time (week or two) for learning basic GSAP code.

     

    NOW:

     

    I don't need any html animation GUI software.

    I don't depend on Adobe updates, subscription.

    I don't have to scroll that timeline all the time, see those lags etc.

    I don't have to see all that extremely overloaded code. Now my code is short, clean and I love that order. 

     

    I just fill total power and freedom with GSAP and my membership investment was covered within few days.

     

    What I'm trying to say is in fact you can avoid using Animate CC at all !!!

     

    Just install some coding IDE and take few weeks for learning basic html, css and gsap syntax.

    Make very simple animations. All possible questions are already answered here on forum or covered in docs section.

     

    Very soon you will be happy to see your improvements in animation and coding overall.

     

    Good luck!

     

    Cheers

    Vitaliy

    • Like 5
  5. Hi Marjan and Oliver,

     

    Sorry I wouldn't say hand coding in NOT smart. IMHO hand coding is a the only way to get clean and fast result.

     

    It's absolutely possible to create more than 10 sizes for less than 8 hours with hand coding.

     

    It's a matter of workflow setup (large screens + graphic editor + IDE + browser) + designing and coding experience + having enough sleep + etc.

     

    Cheers

    Vitaliy

    • Like 3
  6. Hi Matthew,

     

    As I remember you can use fonts in fla source files but there's no way to export editable text in Canvas (though I can be wrong).

     

    I was working years in Flash and then in Animate CC.

    The most huge bugs which drove me crazy all the time were:

    • shifted pivot point after object scaling and easing
    • wrong colors in Animate CC after copy-pasting from Illustrator on MacOs (every each color)
    • not smooth pan and zoom
    But now I'm extremely happy for complete moving my workflow into GreenSock + IDE.

    IMHO it's absolutely Ok having some specific comfortable setup without Animate CC.

     

    Cheers

    Vitaliy

  7. Yep, Chrome has introduced some really odd (BAD) rendering behavior, some of which I detailed in this article: http://greensock.com/will-change/. The Chrome team insists these are "improvements" but I strongly disagree. 

     

    In your demo, things seemed to look better in Chrome is I set CSSPlugin.defaultForce3D = false. Does that help? 

     

     

    Hi Jack,

     

    Many thanks for your response!

    Yes, setting that to false  is just slightly better though it doesn't solve visual lags as they are.

    But of course all these CSS 3D transform "tweaks" by Jonathan together produce great result.

     

    Cheers

    Vitaliy

    • Like 1
  8. Hello Vitaliy Bagmet and welcome to the GreenSock forum!

     

    Ok the following should be more smooth and less jitter jank now. Tested on windows 10 lasted Chrome.

     

    See the Pen MbBKzZ by jonathan (@jonathan) on CodePen

     

    Normally this can be fixed with just a slight rotation, but since it is Chrome it suffers from various browser bugs. Especially when translating text in small increments. Sometimes you have to force Chrome to play nice.

     

    Try adding the following 5 CSS properties to your tweens that animate SplitText

    • translateZ()
    • rotate()
    • transform: perspective()
    • transform-style
    • backface-visibility

    GSAP syntax of the above CSS properties:

    z: 0.01, /* force matrix to matrix3d() and to make smooth */
    rotation:0.01, /* offset slightly to make smooth */
    transformPerspective: 1000, /* add this to force right perspective even though a 2D effect */
    transformStyle:"preserve-3d", /* let the browser know this is 3d effect */
    backfaceVisibility:"hidden", /* make sure when 3d is applied it doesnt bleed over */
    

    So it should look like this for those SplitText tweens functions:

    function footerSplitFunc2() {
            var tl = new TimelineMax();
            tl.staggerFrom(footerSplit2.chars, 0.75, 
            {
              transformOrigin: "50% 100%", 
              autoAlpha: 0, 
              scale: 0, 
              x: 20, 
              z: 0.01, /* force matrix to matrix3d() and to make smooth */
              rotation:0.01, /* offset slightly to make smooth */
              transformPerspective: 1000, /* add this to force right perspective even though a 2D effect  */
              transformStyle:"preserve-3d", /* let the browser know this is 3d effect */
              backfaceVisibility:"hidden", /* make sure when 3d is applied it doesnt bleed over */
              ease: Power1.easeOut
            }, 0.02);
            return tl;
    }
    
    function footerSplitFunc3() {
            var tl = new TimelineMax();
            tl.staggerFrom(footerSplit3.chars, 0.75, 
            {
              transformOrigin: "50% 100%", 
              autoAlpha: 0, 
              scale: 0, 
              x: 20, 
              z: 0.01, /* force matrix to matrix3d() and to make smooth */
              rotation:0.01, /* offset slightly to make smooth */
              transformPerspective: 1000, /* add this to force right perspective even though a 2D effect  */
              transformStyle:"preserve-3d", /* let the browser know this is 3d effect */
              backfaceVisibility:"hidden", /* make sure when 3d is applied it doesnt bleed over */
              ease: Power1.easeOut
            }, 0.02);
            return tl;
    }
    
    function footerSplitFunc4() {
            var tl = new TimelineMax();
            tl.staggerFrom(footerSplit4.chars, 0.75, 
            {
              transformOrigin: "50% 100%", 
              autoAlpha: 0, 
              scale: 0, 
              x: 20, 
              z: 0.01, /* force matrix to matrix3d() and to make smooth */
              rotation:0.01, /* offset slightly to make smooth */
              transformPerspective: 1000, /* add this to force right perspective even though a 2D effect  */
              transformStyle:"preserve-3d", /* let the browser know this is 3d effect */
              backfaceVisibility:"hidden", /* make sure when 3d is applied it doesnt bleed over */
              ease: Power1.easeOut
            }, 0.02);
            return tl;
    }
    

    I did add a slight rotation: 0.01 to some of your tween that were translating in y or x since that can help in Firefox. But you could also add force3D:true to some of your non text elements tweens to make them use translate3d() or matrix3d() to get more smooth movement if needed.

     

    I did not test on retina display (apple 5k) since i do not have one available .

     

    I hope this helps! :)

     

     

    Hi Jonathan,

     

    Wow! Thank you so much for detailed comments and updated sample!

    All is absolutely clear and works great on non-Retina display (and on iMac 5K too of course)!

     

    Many many thanks once again!

     

    Cheers

    Vitaliy

  9. Hi dear devs and coders,

     

    Please have a look at provided CodePen sample. I'm having/seeing issue - jerky animation of characters - with SplitText in Chrome every time I use it. Especially that's noticeably with slight transforms and on non-Retina display.

     

    Not sure maybe I've missed some Chrome spec or tip for solving that.

     

    Please help :)

     

    Cheers

    Vitaliy

    See the Pen yVqYdP by bagmetv (@bagmetv) on CodePen

  10. The simplest workflow I've discovered so far is to do all of the layout in Affinity Designer.  ... Or you can use Illustrator if you feel like working more slowly :P

     

    Then use SVG's to handle 100% of the positioning.

     

    Export as SVG.  (Note: Affinity layer / group names will become path ID names after SVG export -- this is huge)

    Paste SVG code into HTML document for inline SVG.

    Use GSAP to animate the id's / Affinity layers.

     

    This saves an enormous amount of time spent on the initial positioning of objects and lets you do most of the layout / design in a GUI rather than endless code/load/code/load position tweaking.

     

     

    Hi! Yes I have switched from Illustrator to Affinity Designer too. It's great, flexible and smooth! Exporting assets is very comfortable. The only thing there's no option for getting object's CSS. But as for me it's easier to write it instead of copy-pasting.

    • Like 1
  11. Hi !

     

    Just wanted to inform you that v1.3 of Extra Slider has been released.

    The drag mechanics has been updated, and is smoother now.

    Please, have a look and feel free to leave a comment here :)

    Cheers !

     

    Hi Jean-Baptiste and all GSAP fans!

    Thanks for sharing Extra Slider (great product!) and for slider discussion overall.

     

    I'm quite a beginner and creating custom carousel based on Extra Slider (6 slides, draggable, with autoplay/looped) with GSAP animated specific content on each slide.

     

     

    I have a question:

    - how can I listen to activated specific slide (with its some ID, I see no hash) and then execute according function with TimelineMax animation? (and of course execute each time when this slide is getting active by clicking on navigation, autoplay/loop and draggable).

     

    Please let me know at least whether that's possible there.

     

    Thanks,

    Vitaliy

  12. Hi Vitaly,

     

    Thank you very much! Yeah, I typically use css background when building out banners, but when it comes to making websites semantically <img> tags are the way to go. Really you could use either one for banners, it's really personal preference.

     

    A colleague started that infiniti banner, and did some of the setup. It was handed off to me to finish it up. He had already setup that sprite sheet with the copy, but I typically and prefer to work with svg. For that client I think we had to support older versions of IE which doesn't play nice with svg.

     

     

     

    Many thanks for the answer, Ryan!

    Now that is clear! :)

  13. Thank you very much! I appreciate it. Of course! Coming from a strong development background with a lot of big agency experience, I've had the opportunity to learn from great coders. With that said I strive to hand code all js, css, and html using best practices and as much as I can keep file size minimal as possible. Anything more specific you would like me to elaborate on?

     

    Hi Ryan,

     

    Great banners! Many thanks for sharing them!

    Great structure and approach overall! (I've gone through some of them).

    I'm new with GSAP (brilliant platform) and I have few quite simple questions based on 'Infinity ad' example.

     

    - You're linking pictures through CSS background. Why not placing pictures by <img> tags? Because of easier access and control?

    I thought having <img> tags with alt="info" is better in semantic sense.

     

    - I see there was a need to use custom fonts. Why haven't you used text converted into svg curves instead of spritesheet?

     

    Thanks,

    Vitaliy

×