Use of compiled or uncompiled css on CODEPEN to re-create an animation?

Question

The following codepen animation has the option of using either compiled or uncompiled css, which I have not seen or come across before.

Either way, I have tried both compiled and uncompiled in a style sheet to re-create the animation offline, but it does't work.

I have tried other codepens with ordinary CSS and the re-creation works fine.

Can anyone shed any light on this? What needs to go into the style sheet if I am re-creating it?

https://codepen.io/DesignyourCode/pen/QEBYpW

Uncompiled css starts like so:

 CSS Options

@import 'bourbon';

html, body {
    height: 100%;
}
1
@import 'bourbon';
2

3
html, body {
4
    height: 100%;

Where as compiled css in this example:

html, body {
  height: 100%;
}

body {
  background: black;
  overflow-x: hidden;
  padding: 50px;
  position: relative;
  text-align: center;
}

@Temani - what do you mean? First, I need to know which version *uncompiled or compiled* to use in the style sheet. Then, I can proceed with troubleshooting as to whether it is the JS part — Compoot, Jan 31 '18 at 10:19
like @Turnip said you need to use the compiled one offline if you consider only CSS ... by the way it's not a questin of complied or not, it's question of using SCSS or CSS — Temani Afif, Jan 31 '18 at 10:25
@Temani, are you able to post an answer showing how I can get this to work. I used the compiled version offline in a stylesheet called style.css and used a ref link from the html file to it. It didn't work. Should it be saved as something else? I don't know where to start. I've looked up the difference between CSS and SASS etc, but still can't see how to get it to work. — Compoot, Jan 31 '18 at 13:32

score 0 · Answer 1 · edited Jul 09 '18 at 18:57

Are you sure you have recreated everything? The creator of that animation is using the AngularJS library for the JavaScript. You guys must have missed it. I have just copy pasted everything from that CodePen, and it is working fine. Credit goes to the creator of the animation.

var app = angular.module('app', []);

app.controller('AppController', ['$scope', '$getsvg', '$interval',
    function($scope, $getsvg, $interval)
    {

        // Get SVG
        $getsvg.then(function(response) {
            var items = [];

            angular.forEach(response.data.feed.entry, function(value, key) {
                this.push({
                    svg: value['gsx$svg']['$t'],
                    hex: value['gsx$hex']['$t']
                });
            }, items);

            $scope.items = items;
        });

    }
]);

app.factory('$getsvg', ['$http',
    function($http)
    {
        var url = 'https://spreadsheets.google.com/feeds/list/1hajansd_PujIMHSBcYUo7RNCIdHYIFYWAJHEVRqE4rc/od6/public/values?alt=json';
        
        return $http.get(url);
    }
]);

@-webkit-keyframes anim {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(1028%, 1563%, 0);
            transform: translate3d(1028%, 1563%, 0);
  }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(978%, -1544%, 0);
            transform: translate3d(978%, -1544%, 0);
  }
}
@keyframes anim {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(954%, 1346%, 0);
            transform: translate3d(954%, 1346%, 0);
  }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(1055%, 721%, 0);
            transform: translate3d(1055%, 721%, 0);
  }
}
body {
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

svg {
  height: 100%;
  left: 0;
  position: relative;
  width: 100%;
}
svg polygon {
  opacity: 0;
  transform-box: fill-box;
  -webkit-animation: anim 6s ease-in-out infinite;
  animation: anim 6s ease-in-out infinite;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<div ng-app="app" ng-controller="AppController">
    
    <svg viewBox="0 0 605 804">
        <polygon ng-repeat="item in items" ng-class="item.class" fill="{{item.hex}}" points="{{item.svg}}"/>
    </svg>
    
</div>

score 0 · Answer 2 · edited Jul 09 '18 at 18:56

0

The pen uses an AngularJS script. To solve this you need to embed the AngularJS CDN inside of your JavaScript file:

https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js

edited Jul 09 '18 at 18:56

Andrew Myers

2,754
5
32
40

answered Jul 09 '18 at 18:21

Nelh Amstrong

51
1
9

Use of compiled or uncompiled css on CODEPEN to re-create an animation?

2 Answers2