cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="icon-wrapper">
    <svg width="100%" height="100%" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" id="icon" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1;">
        <g>
            <circle cx="25" cy="25" r="24.692" style="fill:url(#main-gradient);" />
            <clipPath id="_clip2">
                <circle cx="25" cy="25.1" r="24.7" />
            </clipPath>
            <g clip-path="url(#_clip2)">
                <g id="stars">
                    <circle cx="22" cy="3.798" r="0.202" style="fill:#fbf9e0;" />
                    <circle cx="24.798" cy="11.798" r="0.202" style="fill:#fbf9e0;" />
                    <circle cx="10.202" cy="7.21" r="0.202" style="fill:#fbf9e0;" />
                    <circle cx="20.681" cy="3.254" r="0.202" style="fill:#fbf9e0;" />
                    <circle cx="26.893" cy="2.527" r="0.131" style="fill:#fbf9e0;" />
                    <circle cx="18.601" cy="7.341" r="0.131" style="fill:#fbf9e0;" />
                    <circle cx="6.543" cy="12.719" r="0.131" style="fill:#fbf9e0;" />
                    <circle cx="43.397" cy="10.95" r="0.131" style="fill:#fbf9e0;" />
                    <circle cx="32.543" cy="12.588" r="0.131" style="fill:#fbf9e0;" />
                    <circle cx="27.155" cy="3.116" r="0.131" style="fill:#fbf9e0;" />
                    <circle cx="33.176" cy="12.202" r="0.202" style="fill:#fbf9e0;" />
                </g>
                <g id="sun">
                    <path id="sun-shine" d="M14.682,4.872c0.06,-0.066 0.146,-0.104 0.237,-0.104c0.09,0 0.176,0.038 0.236,0.104l0.618,0.68l0.863,-0.315c0.085,-0.031 0.178,-0.024 0.258,0.018c0.08,0.041 0.139,0.115 0.161,0.202l0.232,0.889l0.91,0.122c0.089,0.013 0.169,0.062 0.22,0.136c0.052,0.074 0.069,0.167 0.049,0.254l-0.208,0.895l0.748,0.531c0.074,0.052 0.122,0.133 0.133,0.222c0.011,0.09 -0.017,0.18 -0.076,0.248l-0.599,0.695l0.416,0.819c0.04,0.08 0.046,0.174 0.014,0.258c-0.032,0.085 -0.098,0.152 -0.182,0.185l-0.855,0.337l-0.012,0.918c-0.001,0.09 -0.04,0.175 -0.107,0.235c-0.068,0.06 -0.157,0.088 -0.247,0.079l-0.913,-0.099l-0.437,0.807c-0.043,0.08 -0.118,0.137 -0.205,0.159c-0.088,0.021 -0.18,0.005 -0.255,-0.045l-0.762,-0.512l-0.763,0.512c-0.075,0.05 -0.167,0.066 -0.255,0.045c-0.087,-0.022 -0.162,-0.079 -0.205,-0.159l-0.437,-0.807l-0.913,0.099c-0.09,0.009 -0.179,-0.019 -0.247,-0.079c-0.067,-0.06 -0.106,-0.145 -0.107,-0.235l-0.012,-0.918l-0.855,-0.337c-0.083,-0.033 -0.15,-0.1 -0.182,-0.185c-0.031,-0.084 -0.026,-0.178 0.014,-0.258l0.416,-0.819l-0.599,-0.695c-0.059,-0.068 -0.087,-0.158 -0.076,-0.248c0.011,-0.089 0.059,-0.17 0.133,-0.222l0.748,-0.531l-0.208,-0.895c-0.02,-0.087 -0.002,-0.18 0.049,-0.254c0.051,-0.074 0.131,-0.123 0.221,-0.136l0.909,-0.122l0.232,-0.889c0.023,-0.087 0.081,-0.161 0.161,-0.202c0.08,-0.042 0.174,-0.049 0.258,-0.018l0.863,0.315l0.618,-0.68Z" style="fill:#fcf0a4;" />
                    <circle id="sun1" cx="14.919" cy="8.966" r="3.099" style="fill:#ffdc54;" />
                    <path id="shadow" d="M12.509,7.017c-0.025,0.064 -0.049,0.128 -0.07,0.194c-0.529,1.627 0.362,3.377 1.988,3.906c1.256,0.408 2.584,-0.03 3.369,-0.999c-0.601,1.502 -2.275,2.302 -3.835,1.795c-1.627,-0.529 -2.518,-2.279 -1.989,-3.906c0.121,-0.371 0.305,-0.703 0.537,-0.99Z" style="fill:#ffd15c;" />
                </g>
                <g id="moon">
                    <circle id="moon1" cx="14.919" cy="8.966" r="3.099" style="fill:#fbf9e0;" />
                    <path id="moon-shadow" d="M12.509,7.017c-0.025,0.064 -0.049,0.128 -0.07,0.194c-0.529,1.627 0.362,3.377 1.988,3.906c1.256,0.408 2.584,-0.03 3.369,-0.999c-0.601,1.502 -2.275,2.302 -3.835,1.795c-1.627,-0.529 -2.518,-2.279 -1.989,-3.906c0.121,-0.371 0.305,-0.703 0.537,-0.99Z" style="fill:#efe8a8;" />
                </g>
                <g id="cloud1">
                    <path d="M18.02,15.474c-0.052,-0.549 0.673,-2.257 2.627,-1.247c0,0 0.64,-1.448 1.549,-0.37c0,0 0.607,-2.527 2.763,-0.977c0,0 1.819,-3.437 3.74,0.235c0,0 1.92,-0.404 1.819,1.146c0,0 2.847,-0.595 2.998,1.044c0.025,0.271 -0.033,0.674 -2.493,0.506c0,0 -0.808,1.853 -2.358,0.438c0,0 -1.617,2.257 -3.672,-0.203c0,0 -0.775,0.607 -1.281,-0.572c0,0 -5.552,1.488 -5.692,0Z" style="fill:url(#cloud1-gradient);" />
                </g>
                <g id="cloud2">
                    <path d="M34.213,9.107c-0.039,-0.411 0.504,-1.691 1.968,-0.934c0,0 0.479,-1.085 1.161,-0.277c0,0 0.454,-1.893 2.069,-0.732c0,0 1.363,-2.575 2.802,0.177c0,0 1.439,-0.303 1.363,0.858c0,0 2.133,-0.446 2.246,0.782c0.019,0.203 -0.025,0.505 -1.868,0.379c0,0 -0.605,1.388 -1.766,0.328c0,0 -1.212,1.691 -2.751,-0.152c0,0 -0.581,0.455 -0.959,-0.429c0,0 -4.16,1.115 -4.265,0Z" style="fill:url(#cloud2-gradient);" />
                </g>
                
                <g id="mountains">
                    <path id="mountain01" d="M-1.973,25.73c0,0 5.647,-9.361 8.23,-9.191c2.584,0.171 7.271,10.212 7.271,10.212l-15.501,-1.021Z" style="fill:#86646a;" />
                    <path id="mountain02" d="M29.102,30.837c0,0 -5.647,-9.361 -8.231,-9.191c-2.583,0.171 -7.27,10.212 -7.27,10.212l15.501,-1.021Z" style="fill:#86646a;" />
                    <path id="mountain03" d="M18.808,26.094c0,0 -3.112,-7.115 -6.21,-7.318c-1.872,-0.123 -6.82,7.318 -6.82,7.318l13.03,0Z" style="fill:#6d595c;" />
                </g>
                <path id="field1" d="M0.308,25c0,0 4.524,-3.31 25.529,1.675c9.566,2.27 10.59,2.181 17.36,1.389c3.02,-0.354 -48.005,22.138 -42.889,-3.064Z" style="fill:url(#field1-gradient);" />
                <clipPath id="_clip6">
                    <path d="M0.308,25c0,0 4.524,-3.31 25.529,1.675c9.566,2.27 10.59,2.181 17.36,1.389c3.02,-0.354 -48.005,22.138 -42.889,-3.064Z" />
                </clipPath>
                <g clip-path="url(#_clip6)">
                    <path class="road" d="M20.907,25.552c0,0 3.522,4.148 -2.237,8.85c0,0 4.459,-0.145 6.33,-0.984c0,0 1.274,-3.968 -1.424,-7.324l-2.669,-0.542Z" style="fill:#fceb77;" />
                </g>
                <path id="field2" d="M1.145,33.211c0,0 19.455,4.773 31.841,-3.105c6.038,-3.841 14.401,-4.325 18.381,-3.287c4.716,1.229 -6.73,41.356 -41.613,19.626c0,0 -9.293,-10.13 -8.609,-13.234Z" style="fill:url(#field2-gradient);" />
                <clipPath id="_clip8">
                    <path d="M1.145,33.211c0,0 19.455,4.773 31.841,-3.105c6.038,-3.841 14.401,-4.325 18.381,-3.287c4.716,1.229 -6.73,41.356 -41.613,19.626c0,0 -9.293,-10.13 -8.609,-13.234Z" />
                </clipPath>
                <g clip-path="url(#_clip8)">
                    <path class="road" d="M15.207,34.621c0,0 -2.005,3.047 1.695,5.453l-5.52,0.362c0,0 -1.482,-4.16 1.362,-5.983l2.463,0" style="fill:#fceb77;" />
                </g>
                <path id="field3" d="M4.393,40.318c0,0 18.088,0.908 25.733,-4.085c8.31,-5.427 17.432,-8.252 22.63,-8.169c0,0 -12.142,44.767 -48.363,12.254Z" style="fill:url(#field3-gradient);" />
                <clipPath id="_clip10">
                    <path d="M4.393,40.318c0,0 18.088,0.908 25.733,-4.085c8.31,-5.427 17.432,-8.252 22.63,-8.169c0,0 -12.142,44.767 -48.363,12.254Z" />
                </clipPath>
                <g clip-path="url(#_clip10)">
                    <path class="road" d="M20.2,39.443c0,0 6.633,5.501 4.8,14.308l11.009,0c0,0 -3.834,-13.541 -11.009,-15.463c0,0 -0.654,0.398 -4.8,1.155Z" style="fill:#fcf078;" />
                </g>
                <g id="dots">
                    <ellipse cx="4.689" cy="28.544" rx="0.569" ry="0.225" style="fill:#fceb77;" />
                    <ellipse cx="7.862" cy="38.205" rx="0.376" ry="0.149" style="fill:#fceb77;" />
                    <ellipse cx="7.862" cy="38.205" rx="0.376" ry="0.149" style="fill:#fceb77;" />
                    <ellipse cx="8.99" cy="38.506" rx="0.376" ry="0.149" style="fill:#fceb77;" />
                    <ellipse cx="9.367" cy="37.907" rx="0.376" ry="0.149" style="fill:#fceb77;" />
                    <ellipse cx="6.876" cy="28.695" rx="0.405" ry="0.188" style="fill:#fceb77;" />
                    <ellipse cx="27.621" cy="28.319" rx="0.405" ry="0.188" style="fill:#fceb77;" />
                    <ellipse cx="26.812" cy="28.732" rx="0.405" ry="0.188" style="fill:#fceb77;" />
                    <ellipse cx="27.621" cy="29.015" rx="0.202" ry="0.094" style="fill:#fceb77;" />
                    <ellipse cx="5.778" cy="28.13" rx="0.405" ry="0.188" style="fill:#fceb77;" />
                    <ellipse cx="30.964" cy="38.228" rx="0.405" ry="0.188" style="fill:#fceb77;" />
                    <ellipse cx="32.575" cy="38.416" rx="0.405" ry="0.188" style="fill:#fceb77;" />
                    <ellipse cx="32.575" cy="39.497" rx="0.717" ry="0.334" style="fill:#fceb77;" />
                    <ellipse cx="19.127" cy="47.016" rx="0.717" ry="0.334" style="fill:#fceb77;" />
                    <ellipse cx="20.993" cy="47.842" rx="0.358" ry="0.167" style="fill:#fceb77;" />
                    <ellipse cx="34.296" cy="38.975" rx="0.405" ry="0.188" style="fill:#fceb77;" />
                </g>
                <g id="tree">
                    <g id="leaves">
                        <path id="lomb" d="M36.009,11.769c2.313,0 6.939,11.972 6.939,15.802c0,3.83 -3.11,6.939 -6.939,6.939c-3.83,0 -6.939,-3.109 -6.939,-6.939c0,-3.83 4.626,-15.802 6.939,-15.802Z" style="fill:#43982f;" />
                        <clipPath id="_clip11">
                            <rect id="lob_világos" x="36.101" y="11.769" width="6.846" height="22.741" />
                        </clipPath>
                        <g clip-path="url(#_clip11)">
                            <path id="lomb-right" d="M36.009,11.769c2.313,0 6.939,11.972 6.939,15.802c0,3.83 -3.11,6.939 -6.939,6.939c-3.83,0 -6.939,-3.109 -6.939,-6.939c0,-3.83 4.626,-15.802 6.939,-15.802Z" style="fill:#6eb42f;" />
                        </g>
                    </g>
                    <path id="tree-trunk" d="M36.147,21.19l0,17.041" style="fill:none;stroke:#604a42;stroke-width:1.36px;" />
                    <path id="tree-branch_left" d="M33.403,22.556l0.034,0.002l0.034,0.003l0.034,0.006l0.034,0.007l0.033,0.008l0.033,0.011l0.033,0.011l0.031,0.014l0.031,0.015l0.03,0.017l0.03,0.018l0.028,0.02l0.027,0.021l0.026,0.022l0.025,0.024l0.024,0.025l0.022,0.026l0.021,0.028l0.02,0.028l0.018,0.029l0.017,0.03l0.015,0.031l0.014,0.032l0.012,0.032l0.01,0.033l0.009,0.033l0.007,0.034l0.005,0.034l0.003,0.034l0.002,0.035l0,0.034l-0.002,0.035l-0.003,0.034l-0.005,0.039l-0.005,0.043l-0.006,0.063l-0.006,0.08l-0.006,0.096l-0.004,0.111l-0.002,0.058l-0.001,0.063l0,0.065l0.001,0.068l0.001,0.071l0.003,0.072l0.004,0.075l0.004,0.077l0.006,0.078l0.007,0.079l0.009,0.081l0.01,0.082l0.012,0.083l0.013,0.083l0.015,0.084l0.017,0.084l0.018,0.084l0.021,0.084l0.022,0.084l0.025,0.083l0.026,0.083l0.028,0.082l0.032,0.083l0.015,0.038l0.016,0.04l0.018,0.039l0.017,0.039l0.019,0.038l0.018,0.039l0.02,0.038l0.02,0.037l0.02,0.037l0.021,0.037l0.022,0.036l0.022,0.035l0.023,0.035l0.023,0.035l0.024,0.034l0.025,0.034l0.025,0.033l0.026,0.033l0.026,0.032l0.027,0.031l0.028,0.031l0.028,0.031l0.03,0.03l0.029,0.029l0.031,0.029l0.031,0.028l0.032,0.028l0.033,0.027l0.034,0.027l0.034,0.026l0.035,0.025l0.037,0.025l0.037,0.024l0.038,0.024l0.039,0.023l0.04,0.023l0.041,0.022l0.042,0.021l0.044,0.02l0.044,0.02l0.046,0.02l0.047,0.018l0.048,0.018l0.05,0.017l0.05,0.017l0.052,0.015l0.054,0.015l0.055,0.014l0.056,0.013l0.058,0.012l0.06,0.011l0.061,0.011l0.062,0.009l0.071,0.009l0.034,0.005l0.034,0.007l0.033,0.009l0.033,0.01l0.032,0.012l0.032,0.014l0.031,0.015l0.03,0.017l0.029,0.018l0.028,0.02l0.027,0.021l0.026,0.022l0.025,0.024l0.024,0.025l0.022,0.026l0.022,0.027l0.019,0.029l0.018,0.029l0.017,0.03l0.015,0.031l0.014,0.032l0.012,0.032l0.01,0.033l0.009,0.033l0.006,0.034l0.006,0.034l0.003,0.034l0.002,0.035l0,0.034l-0.002,0.035l-0.004,0.034l-0.005,0.034l-0.007,0.034l-0.008,0.033l-0.011,0.033l-0.012,0.032l-0.013,0.032l-0.016,0.031l-0.016,0.03l-0.019,0.029l-0.019,0.028l-0.022,0.028l-0.022,0.026l-0.024,0.025l-0.025,0.023l-0.026,0.023l-0.027,0.021l-0.028,0.019l-0.03,0.019l-0.03,0.016l-0.031,0.015l-0.031,0.014l-0.033,0.012l-0.033,0.01l-0.033,0.009l-0.034,0.007l-0.034,0.005l-0.034,0.003l-0.035,0.002l-0.034,0l-0.034,-0.002l-0.035,-0.003l-0.083,-0.011l-0.089,-0.013l-0.087,-0.015l-0.087,-0.016l-0.084,-0.018l-0.084,-0.019l-0.083,-0.021l-0.081,-0.023l-0.08,-0.024l-0.078,-0.025l-0.078,-0.027l-0.076,-0.028l-0.075,-0.03l-0.073,-0.031l-0.073,-0.032l-0.071,-0.034l-0.069,-0.035l-0.068,-0.036l-0.067,-0.038l-0.066,-0.038l-0.064,-0.04l-0.063,-0.042l-0.061,-0.042l-0.06,-0.043l-0.059,-0.044l-0.057,-0.046l-0.056,-0.046l-0.055,-0.047l-0.053,-0.048l-0.052,-0.049l-0.05,-0.05l-0.049,-0.05l-0.048,-0.051l-0.046,-0.052l-0.045,-0.053l-0.044,-0.053l-0.042,-0.053l-0.042,-0.054l-0.039,-0.055l-0.039,-0.055l-0.037,-0.055l-0.037,-0.056l-0.035,-0.056l-0.033,-0.057l-0.033,-0.056l-0.032,-0.057l-0.03,-0.057l-0.029,-0.058l-0.029,-0.057l-0.027,-0.058l-0.026,-0.058l-0.025,-0.057l-0.024,-0.058l-0.024,-0.06l-0.043,-0.114l-0.04,-0.115l-0.037,-0.115l-0.034,-0.115l-0.03,-0.114l-0.027,-0.113l-0.025,-0.112l-0.022,-0.111l-0.02,-0.109l-0.017,-0.108l-0.015,-0.107l-0.013,-0.104l-0.011,-0.103l-0.009,-0.1l-0.007,-0.098l-0.006,-0.096l-0.005,-0.093l-0.003,-0.09l-0.002,-0.087l-0.001,-0.085l0.001,-0.081l0.001,-0.078l0.002,-0.075l0.005,-0.136l0.007,-0.12l0.008,-0.104l0.008,-0.085l0.007,-0.065l0.007,-0.051l0.005,-0.034l0.007,-0.034l0.009,-0.033l0.01,-0.033l0.012,-0.033l0.014,-0.031l0.015,-0.031l0.016,-0.03l0.019,-0.029l0.019,-0.029l0.021,-0.027l0.023,-0.026l0.024,-0.025l0.025,-0.024l0.026,-0.022l0.027,-0.021l0.028,-0.02l0.03,-0.018l0.03,-0.017l0.031,-0.015l0.031,-0.014l0.033,-0.012l0.032,-0.01l0.034,-0.009l0.033,-0.006l0.035,-0.006l0.034,-0.003l0.034,-0.002l0.035,0Z" style="fill:#604a42;" />
                    <path id="tree-branch_right" d="M38.878,25c0,0 0.586,4.016 -2.731,4.41" style="fill:none;stroke:#604a42;stroke-width:1.36px;" />
                </g>
            </g>
            
            <!-- <circle id="sun1" cx="10" cy="30" r="1" style="fill:#ff0000;" /> -->
            
        </g>
        <defs>
            <linearGradient id="main-gradient" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.183811,23.4145,-23.4145,0.183811,24.8162,3.55534)">
                <stop offset="0" style="stop-color:#62dde9;stop-opacity:1" />
                <stop offset="1" style="stop-color:#caf1d6;stop-opacity:1" />
            </linearGradient>
            <linearGradient id="cloud1-gradient" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-0.213585,-2.88339,2.88339,-0.213585,26.8449,17.1945)">
                <stop class="first-stop" offset="0" style="stop-color:#e3e3e3;stop-opacity:1" />
                <stop class="second-stop" offset="1" style="stop-color:#fff;stop-opacity:1" />
            </linearGradient>
            <linearGradient id="cloud2-gradient" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-0.14239,-3.05565,3.05565,-0.14239,41.0015,9.72518)">
                <stop offset="0" style="stop-color:#ebebeb;stop-opacity:1" />
                <stop offset="0.2" style="stop-color:#f3f3f3;stop-opacity:1" />
                <stop offset="0.42" style="stop-color:#fbfbfb;stop-opacity:1" />
                <stop offset="1" style="stop-color:#fff;stop-opacity:1" />
            </linearGradient>
            <linearGradient id="field1-gradient" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-2.11479,8.09669,-8.09669,-2.11479,14.6769,26.0939)">
                <stop offset="0" style="stop-color:#bbcd21;stop-opacity:1" />
                <stop offset="1" style="stop-color:#9eb624;stop-opacity:1" />
            </linearGradient>
            <linearGradient id="field2-gradient" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(2.50116e-16,-4.0847,4.0847,2.50116e-16,22.7738,38.2753)">
                <stop offset="0" style="stop-color:#6b8c31;stop-opacity:1" />
                <stop offset="1" style="stop-color:#85a234;stop-opacity:1" />
            </linearGradient>
            <linearGradient id="field3-gradient" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(5.74015e-16,-9.37438,9.37438,5.74015e-16,28.9009,49.692)">
                <stop offset="0" style="stop-color:#abbf22;stop-opacity:1" />
                <stop offset="1" style="stop-color:#bbcc1c;stop-opacity:1" />
            </linearGradient>
        </defs>
    </svg>
</div>

<a href="//pathlove.com" class="logo" target="_blank">
    <img src="//pathlove.com/wp-content/themes/pathlove/assets/logo-square2.png" alt="" />
</a>
            
          
!
            
              body {
    width: 100vw;
    height: 100vh;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-wrapper {
    max-width: 520px;
    width: 100%;
    position: relative;
    margin: 20px;
}

#stars circle {
    opacity: 0;
    visibility: hidden;
}

.logo {
    height: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    display: none;
    
    @media (min-width: 992px) {
        display: inline-block;
    }
    
    img {
        max-height: 100%;
        width: auto;
    }
}
            
          
!
            
              (function() {

    // Timeline(s) Vars
    var mainTl = new TimelineMax();
    
    // Clouds Timeline
    function getCloudsTl() {
        var cloudsTl = new TimelineMax();
        
        cloudsTl
            .add('cloud-start')
            .fromTo('#cloud1', 40, {x: '100%'}, {x: '-130%', repeat: -1, yoyo: true, ease: Power0.easeNone}, 'cloud-start')
            .fromTo('#cloud2', 40, {x: '-200%'}, {x: '40%', repeat: -1, yoyo: true, ease: Power0.easeNone}, 'cloud-start');
        
        return cloudsTl;
    }
    
    // SunTimeline
    function getSunTl() {
        var sunTl = new TimelineMax({repeat: -1});
        sunTl
            .set('#stars circle', {autoAlpha: 0})
            .set('#sun', {x:'-3', y:'15'})
            .set('#moon', {x:'-3', y:'15'})
            .add('sun-start')
            .to('#sun', 2, {scale: 1.2, x: '2', y: '2', transformOrigin: 'center center', ease: Power4.easeInOut})
            .to('#sun', 3, {scale: 1, x: '12', y: '-16', transformOrigin: 'center center', ease: Power4.easeInOut}, '+=2')
            .add('sun-out')
            
            // Sky
            .staggerTo("#main-gradient stop", 0.5, {cycle:{ stopColor: ['#29545b','#3894a3']}, ease: Power4.easeInOut}, 0.1, 'sun-out-=1.8')
            .staggerTo("#cloud1-gradient stop", 0.5, {cycle:{ stopColor: ['#BECCBF']},  ease: Power4.easeInOut}, 0.1, 'sun-out-=1.8')
            .staggerTo("#cloud2-gradient stop", 0.5, {cycle:{ stopColor: ['#BECCBF']},  ease: Power4.easeInOut}, 0.1, 'sun-out-=1.8')
            
            // Mountains
            .to('#mountain01', 0.5, {fill: '#113032',  ease: Power4.easeInOut}, 'sun-out-=1.8')
            .to('#mountain02', 0.5, {fill: '#113032',  ease: Power4.easeInOut}, 'sun-out-=1.8')
            .to('#mountain03', 0.5, {fill: '#0f3739',  ease: Power4.easeInOut}, 'sun-out-=1.8')
            
            // Hill
            .to('#dots ellipse', 0.5, {fill: '#2F5859',  ease: Power4.easeInOut}, 'sun-out-=1.8')
            .to('.road', 0.5, {fill: '#95b6b7',  ease: Power4.easeInOut}, 'sun-out-=1.8')
            .staggerTo("#field1-gradient stop", 0.5, {cycle:{stopColor: ['#304f50']}, ease: Power4.easeInOut}, 0.1, 'sun-out-=1.8')
            .staggerTo("#field2-gradient stop", 0.5, {cycle:{stopColor: ['#123b3b']}, ease: Power4.easeInOut}, 0.1, 'sun-out-=1.8')
            .staggerTo("#field3-gradient stop", 0.5, {cycle:{stopColor: ['#366467']}, ease: Power4.easeInOut}, 0.1, 'sun-out-=1.8')
            
            // Tree
            .to('#lomb', 0.5, {fill: '#204f51',  ease: Power4.easeInOut}, 'sun-out-=1.8')
            .to('#lomb-right', 0.5, {fill: '#175e61',  ease: Power4.easeInOut}, 'sun-out-=1.8')
            .to(['#tree-trunk', '#tree-branch_right'], 0.5, {stroke: '#233330',  ease: Power4.easeInOut}, 'sun-out-=1.8')
            .to('#tree-branch_left', 0.5, {fill: '#233330',  ease: Power4.easeInOut}, 'sun-out-=1.8')
            
            // Stars
            .add('stars-in')
            .staggerTo('#stars circle', 0.5, {autoAlpha: 1, ease: Power4.easeInOut}, 0.1, 'sun-out-=1.7')
            .staggerFromTo('#stars circle', 1.2, {autoAlpha: 1}, {autoAlpha: 0.5, ease: Power4.easeInOut, immediateRender: false, repeat: 4, yoyo: true}, 0.3, 'sun-out-=1.7')
            
            // Moon
            .add('moon-start')
            .to('#moon', 3, {scale: 1.7, x: '2', y: '2', transformOrigin: 'center center', ease: Power4.easeInOut}, 'stars-in-=1')
            .to('#moon', 2, {scale: 1, x: '10', y: '-12', transformOrigin: 'center center', ease: Power4.easeInOut}, 'stars-in+=4.5')
            .add('moon-out')
        
            // Sky
            .staggerTo("#main-gradient stop", 0.5, {cycle:{ stopColor: ['#62dde9','#caf1d6']}, ease: Power4.easeInOut}, 0.1, 'moon-out-=1.1')
            .staggerTo("#cloud1-gradient stop", 0.5, {cycle:{ stopColor: ['#e3e3e3', '#ffffff']},  ease: Power4.easeInOut}, 0.1, 'moon-out-=1.1')
            .staggerTo("#cloud2-gradient stop", 0.5, {cycle:{ stopColor: ['#ebebeb', '#f3f3f3', '#fbfbfb', '#ffffff']},  ease: Power4.easeInOut}, 0.1, 'moon-out-=1.1')
            
            // Mountains
            .to('#mountain01', 0.5, {fill: '#86646a',  ease: Power4.easeInOut}, 'moon-out-=1.1')
            .to('#mountain02', 0.5, {fill: '#86646a',  ease: Power4.easeInOut}, 'moon-out-=1.1')
            .to('#mountain03', 0.5, {fill: '#6d595c',  ease: Power4.easeInOut}, 'moon-out-=1.1')
            
            // Hill
            .to('#dots ellipse', 0.5, {fill: '#fceb77',  ease: Power4.easeInOut}, 'moon-out-=1.1')
            .to('.road', 0.5, {fill: '#fceb77',  ease: Power4.easeInOut}, 'moon-out-=1.1')
            .staggerTo("#field1-gradient stop", 0.5, {cycle:{stopColor: ['#bbcd21', '#9eb624']}, ease: Power4.easeInOut}, 0.1, 'moon-out-=1.1')
            .staggerTo("#field2-gradient stop", 0.5, {cycle:{stopColor: ['#6b8c31', '#85a234']}, ease: Power4.easeInOut}, 0.1, 'moon-out-=1.1')
            .staggerTo("#field3-gradient stop", 0.5, {cycle:{stopColor: ['#abbf22', '#bbcc1c']}, ease: Power4.easeInOut}, 0.1, 'moon-out-=1.1')
         
            // Tree
            .to('#lomb', 0.5, {fill: '#43982f',  ease: Power4.easeInOut}, 'moon-out-=1.1')
            .to('#lomb-right', 0.5, {fill: '#6eb42f',  ease: Power4.easeInOut}, 'moon-out-=1.1')
            .to(['#tree-trunk', '#tree-branch_right'], 0.5, {stroke: '#604a42',  ease: Power4.easeInOut}, 'moon-out-=1.1')
            .to('#tree-branch_left', 0.5, {fill: '#604a42',  ease: Power4.easeInOut}, 'moon-out-=1.1')
            
            // Stars
            .add('stars-out')
            .to('#stars circle', 0.2, {autoAlpha: 0, ease: Power4.easeInOut}, 'moon-out-=1.1')

            ;
        
        return sunTl;
    }
    
    function getSunMetaTl() {
        var sunMetaTl = new TimelineMax({repeat: -1, repeatDelay: 1});
        sunMetaTl
            .to('#sun-shine', 15, {rotation: '720', transformOrigin: 'center center', repeat: -1, ease: Power0.easeNone}, 'sun-start')
            .fromTo('#sun-shine', 2, {scale: 1}, {scale: 1.1, transformOrigin: 'center center',  ease: Power0.easeNone, repeat: -1, yoyo: true}, 'sun-start')
            ;
        return sunMetaTl;
    }
    
    // Init
    function init() {
        mainTl
            .add(getSunMetaTl(), 'scene-sun-meta')
        	.add(getCloudsTl(), 'scene-sun-meta')
            .add(getSunTl(), 'scene-sun-meta');
    }
    
    init();
})();
            
          
!
999px
Loading ..................

Console